The next release of Metawidget (v4.0) introduces Web Components!
Web Components are an exciting new HTML standard that promise to bring much of the UI goodness of frameworks like AngularJS to HTML without any additional libraries. As usual with emerging technologies, not all browsers fully support Web Components, but there are fantastic 'stop gap' libraries such as Polymer that can get you most of the way there today.
With Web Components, you can use Metawidget in fewer lines of code than ever before! Here's a complete example:
<html>
<head>
<script src="metawidget-core.min.js"></script>
<style>
#metawidget {
border: 1px solid #cccccc;
width: 250px;
border-radius: 10px;
padding: 10px;
margin: 50px auto;
display: block;
}
</style>
<script>
var person = {
firstname: 'Homer',
surname: 'Simpson',
age: 36,
save: function() {
document.getElementById( 'metawidget' ).save();
console.log( person );
}
}
</script>
</head>
<body>
<x-metawidget id="metawidget" path="person"></x-metawidget>
</body>
</html>
Note the new x-metawidget tag. This is registered automatically just by including metawidget-core.min.js. It's available to your code just like any other HTML tag. It has custom methods such as save to make it easy to bind data back from the Metawidget, and automatically watches attributes such as path to rebuild the Metawidget.
Try it today in Chrome:
We've also ported the existing Address Book sample application to Web Components to provide a more meaty example:
Download it and give it a try! And welcome to the future :)
0 comments:
Post a Comment