I recently read a Google+ comment comparing AngularJS Metawidget to the excellent Backbone Forms library. The two approaches look surprisingly similar, so I thought it might be beneficial to start a dialogue between our respective teams.
So, here's the Backbone Forms Usage Example mapped (roughly) into AngularJS Metawidget:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="http://metawidget.org/js/3.3/metawidget-core.min.js"></script>
<script src="http://metawidget.org/js/3.3/metawidget-angular.min.js"></script>
<script>
angular.module( 'myApp', [ 'metawidget' ] );
function UserController( $scope ) {
$scope.user = {
title: "Mr",
name: "John Doe",
email: "",
birthday: new Date( 1, 1, 1970 ),
password: "",
address: {
street: "123 Sample Street",
city: "Sampleville",
postcode: "1234"
},
notes: ""
};
}
</script>
</head>
<body ng-app="myApp" ng-controller="UserController">
<metawidget ng-model="user"/>
</body>
</html>
Backbone Forms further supports schemas to refine your UI. Metawidget does something similar using the JSON Schema specification:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="http://metawidget.org/js/3.3/metawidget-core.min.js"></script>
<script src="http://metawidget.org/js/3.3/metawidget-angular.min.js"></script>
<script>
angular.module( 'myApp', [ 'metawidget' ] );
function UserController( $scope ) {
$scope.user = {};
$scope.config = {
inspector: function( toInspect, type, names ) {
if ( names === undefined ) {
return {
properties: {
title: { type: 'string', enum: ['Mr', 'Mrs', 'Ms'] },
name: { type: 'string' },
email: { type: 'string', required: true },
birthday: { type: 'date' },
password: { type: 'string', masked: true },
address: {},
notes: { type: 'string', large: true }
}
}
}
if ( names[0] === 'address' ) {
return {
properties: {
street: { type: 'string' },
city: { type: 'string' },
postcode: { type: 'string' }
}
}
};
}
}
}
</script>
</head>
<body ng-app="myApp" ng-controller="UserController">
<metawidget ng-model="user" config="config"/>
</body>
</html>
I think our two approaches have a lot of common. But it'd be interesting to explore our differences and see if we can converge further. For example, I'd be interested in whether Backbone Forms has (either implicit or explicit) equivalents to the five stages of Metawidget's pipeline. Or whether Metawidget's API can be simplified for JavaScript users.
Version 3.3 of Metawidget, the 
