<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</script>
<script>
var titleSecondary =$.component({
template:$('#title-secondary-template').html()
});
var paragraph =$.component({
template:$('#paragraph-template').html()
});
var titlePrimary =$.component({
template:$('#title-primary-template').html(),
children:{
'titleSecondary':titleSecondary.render(),
'paragraph':paragraph.render()
}
});
$('body').append(titlePrimary.render());
</script>
Bind data
You can also bind your data by declaring a data-bind-id attribute with a name and then apply a data-bind attribute to another element with the name target. Follow this example:
<scripttype="text/template"id="name-template">
<div>
<h1>My name is <spandata-bind="name"></span></h1>
<inputtype="text"data-bind-id="name"/>
</div>
</script>
<scripttype="text/javascript">
var componentName =$.component({
template:$('#name-template').html(),
});
$('body').append(componentName.render());
</script>
It's possible to pass a callback method in $.component:
var componentName =$.component({
template:$('#name-template').html(),
bindData:function(val){
return val + val;
}
});
Lifecycle of component
componentWillMount method option will run before the render of component.
componentDidMount method option will run after the render of component.
componentWillUpdate each time, method option will run before the component re-renders. As argument, you can use old declared data.
componentDidUpdate each time, method option will run after the component re-renders. As argument, you can use old declared data.
Contributing
Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Added some feature')
Push to the branch (git push origin my-new-feature)