I need to do something like this:
<polymer-element name="base-page">
<template>
<my-element>
styleCallback="{{getStyle}}"
</my-element>
</template>
<script>
Polymer({
getStyle: function(data) {
return {
color: "#FF0000"
}
}
});
</script>
</polymer-element>
<base-page></base-page>
Where the my-element calls out into the getStyle function to get an object that it can then use to do its internal processing. I am not sure how I do that in above. Can anyone help? Thanks :-)
Best Regards
Justin Case
When do you want to use this ? Maybe you can handle this by the lifecycle events and data binding.
For example :
<polymer-element name="base-page">
<template>
<my-element>
styleCallback="{{color}}"
</my-element>
</template>
<script>
Polymer({
created: function() {
this.color: "#FF0000";
}
});
</script>
</polymer-element>
<base-page></base-page>
Hope I understand you right :)
Related
I try to return the part of html depending on variable type I want to do like：
<template>
<div>{{getvalue(this.$store.state.output)}}</div>
</template>
<script>
export default {
methods:{
getvalue(output){
if(output.constructor == Array){
re="";
for(i in output){
re+=<p>{{i}}</p>;
}
return re;
}
else if(output.constructor == Object){
re="";
for(i in output){
re+=<p><span>i</span><span>{{output[i]}}</span></p>
}
return re;
}else if(output.constructor == String){
return <p>{{output}}</p>
}
}
},
...
}
</script>
I know in react I can use virtualDOM to do that， how should I do the similar things like above in Vue2.5.11?
#ceejayoz is right. It would be missing the whole point of Vue.
Another mistake is that computed values don't accept parameters. It is supposed to be treated as a value and not a function.
This is a more proper way of doing things in Vue. By using v-if and v-for.
<template>
<div>
<div v-if="getOutputConstructor==Array">
<p v-for="i in this.$store.state.output" :key="i">{{i}}</p>
</div>
<div v-else-if="getOutputConstructor==Object">
...
</div>
<div v-else-if="getOutputConstructor==String">
...
</div>
</div>
</template>
<script>
export default {
computed: {
getOutputConstructor() {
const output = this.$store.state.output;
return output.constructor;
}
}
};
</script>
But.. if you really really want to do it the wrong way, use v-html
I haven't used React in several months, and tonight I was trying to write jsx that is automatically compiled to jsx by babel according to these directions.
I have two files like this:
Parent.jsx
var Parent = React.createClass({
render: function() {
return (<Child></Child>);
}
});
and
Child.jsx
var Child= React.createClass({
render: function() {
return (<span>CHILD</span>);
}
});
I am using babel to monitor the files for changes and output new js files when needed, and it always renders the Child component as React.createElement("Child", null) instead of React.createElement(Child, null) like I expect.
I'm new to babel and node in general and can't find a way to get this jsx transform to work as I expect. Is there something I'm missing? I feel like this pattern used to work, but I've never tried it with anything like babel before.
It took me what felt like forever to figure this out, but it turns out you can just load all the files from the HTML and then nest them later on.
HTML:
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>
<body>
<div id="root"></div>
<div id="test"></div>
</body>
<script src="./Test3a.jsx" type="text/babel"></script>
<script src="./Test3b.jsx" type="text/babel"></script>
<script type="text/babel">
ReactDOM.render(<Ostrich />, document.getElementById("root"));
</script>
<script type="text/babel">
ReactDOM.render(<Monkey />, document.getElementById("test"));
</script>
Test3A.jsx:
window.Ostrich = function() {
return (
<div>
Ostriches
</div>
);
}
window.Monkey = function() {
return (
);
}
Test3A.jsx:
window.MoreMonkeys = function() {
return (
<div>
That's a lot of Monkeys.
</div>
);
}
This is for non-webpack "React JS", or more accurately Babel/JSX "without" ReactJS. It may not be a perfect solution, but hopefully it helps.
How can I fade out the following?
It does also need to be removed completely, not just only alpha 0 but also display:none and visibility:hidden after the fade out.
FIDDLE: http://jsfiddle.net/fourroses666/ywMUx/2/
js:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$('.go-away').click(function() {
$('.message').removeClass('show');
});
</script>
css:
<style>
.message{display:none; visibility:hidden;}
.message.show{display:block; visibility:visible;}
.go-away{float:right; cursor:pointer; cursor:hand;}
</style>
html:
<div class="message show">Pizza is nice! <div class="go-away">x</div></div>
Try this
$('.go-away').click(function() {
$(this).parent().fadeOut();
});
fadeOut makes it invisible, the 400 is how many milliseconds to fade out over, and then function() { $(this).remove() } is the callback function (called after the fadeOut animation has completed) that will remove the element from the DOM. Here's a working fiddle. Let me know if this helps or if you have any questions :)
$('.go-away').click(function() {
$('.message').fadeOut(400, function() {
$(this).remove();
});
});
How do I autosubmit the selection made with Twitter Bootstrap typeahead()??
http://twitter.github.com/bootstrap/javascript.html#typeahead
There is a clean way using the updater callback:
input.typeahead({
'source' : ['foo', 'bar'],
'updater' : function(item) {
this.$element[0].value = item;
this.$element[0].form.submit();
return item;
}
});
When user selects an option (either by mouse click or keyboard), the callback populates the input box and sends the form.
If you use the external typeahead.js plugin (recommended for Bootstrap 3):
To trigger a form on select just use the custom events.
$('#my-input')
.typeahead({/* put you options here */})
.on('typeahead:selected', function(e){
e.target.form.submit();
});
More info on custom events here and demo about JSfiddle.
Might not be the best solution, but I just tried this on my typeahead setup locally and it worked.
If your typeahead looks something like this...
<form id="test-form" method="post" action="">
<input id="test-input" type="text" data-provide="typeahead"
data-source='["1","2',"3"]' />
</form>
Then you can submit it with this javascript.
<script type="text/javascript">
$('#test-input').change(function() {
$('#test-form').submit();
});
</script>
Apparently there are a few git merge requests. This one does the job and allows you to send an array of objects to typeahead: https://github.com/twitter/bootstrap/pull/1751
I added a blur callback on the input. Be aware that you need to wait for a short period, that typeahead can change the value in the input and the blur callback is not called before that. It's just a workaround, but it works.
$('input.myTypeaheadInput').blur(function(e) {
window.setTimeout(function() {
window.console && console.log('Works with clicking on li item and navigating with the keyboard. Yay!');
}, 50);
});
To populate a value of a hidden field in an html form from the typeahead data selection, I did the following:
$('#prefetch').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'trees',
source: trees,
limit: 15
}).on('typeahead:selected', function(e) {
var result = $('#prefetch').val()
$('#formpane input[name=\"myID\"]').val(result)
});
For reference, here's the html code:
<body>
<div id="formpane">
<form action="/thanks" method="POST">
<input class="typeahead" type="text" placeholder="select categories" id="prefetch">
<button type="submit">Submit</button>
<input type="hidden" name="myID" />
</form>
</div>
<script type="text/javascript" src="js_file_above.js"></script>
</body>
I'm very new to web development so forgive me for any obvious questions. I'm having trouble getting this function to work. I've been racking my brain for a while now.
I placed the php code in the url window and it displays the appropriate output so I know the php code is ok. I just can't get this function to display the query results into the "wine_categories" . Thanks in advance for all your help. Here's the code:
<script type="text/javascript">
var jQT = new $.jQTouch();
function showtype(type)
{
$('wine_categories').children().remove();
$.ajax({
type:"POST",
url:"get_winebot_type.php",
success:function(html){
$('#wine_categories').append(html);
jQT.goTo('#wine_list', 'slide');
}
});
return false;
}
</script>
Here's the <div>:
<div id="wine_list">
<div class="toolbar">
<h1>Categories</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="wine_categories">
</div>
The most obvious mistake I can see is this line:
$('wine_categories').children().remove();
You missed a hash in front of the ID:
$('#wine_categories').children().remove();