Data Binding & BindOnce
https://github.com/Pasvaz/bindonce
AngularJs Day - Ancona, 21 Marzo 2014
Markup
<body ng-app="twoway" ng-controller="MainCtrl">
Ciao {{name}}
<input type="text" ng-model="name">
<button ng-click="reset()">Reset</button>
</body>
Script
var app = angular.module('twoway', []);
app.controller('MainCtrl', ['$scope', function($scope){
$scope.name = "pippo";
$scope.reset = function() {
$scope.name = "Sconosciuto";
}
}]);
Markup
Ciao {{name}}
<input type="text" ng-model="name">
<button ng-click="reset()">Reset</button>
Script
$scope.name = "pippo";
$scope.reset = function() {
$scope.name = "Sconosciuto";
}
Ciao {{name}}
Ciao <span ng-bind="name"></span>
Ciao {{ name }}
1 Watcher
<span ng-bind="name"></name>
1 Watcher
<input type="text" ng-model="name">
1 Watcher
<div custom-visible="mostra">Custom DIV</div>
1 Watcher
<script>
module.directive('customVisible', function () {
return {
restrict: "AC",
link: function (scope, element, attrs)
{
scope.$watch(attrs.customVisible, function (newValue) {
element.css('visibility',
toBoolean(newValue)
? 'visible'
: 'hidden'
);
});
}
};
})
</script>
$scope.name = "Sconosciuto";
console.log( $scope.name );
var name = ko.observable();
name("Sconosciuto");
console.log( name() );
var utente = Ember.Object.create({
name: ""
});
utente.set('message', "Sconosciuto");
console.log( utente.get('name') );
for(var i=0; i<5000; i++){
$scope.numeri.push(i);
}
for(var i=0; i<5000; i++){
this.numeri.push(i);
}
var numeriTmp = [];
for(var i=0; i<5000; i++){
numeriTmp.push(i);
}
this.numeri(numeriTmp);
for(var i=0; i<5000; i++){
this.numeri.pushObject(i);
}
Progettare la UI in modo da non superare i 2000 watcher.
<div bindonce="Person" bo-title="Person.title">
<span bo-bind="Person.firstname"></span>
<span bo-bind="Person.lastname"></span>
<img bo-src="Person.picture" bo-alt="Person.title">
<p bo-class="{'fancy':Person.isNice}" bo-html="Person.story"></p>
</div>
<ul>
<li bindonce ng-repeat="person in Persons">
<a bo-href="'#/people/' + person.id">
<img bo-src="person.imageUrl">
</a>
<a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
<p bo-class="{'cycled':person.generated}"
bo-html="person.description"></p>
</li>
</ul>
Equivalenti
bo-bind, bo-class, bo-style, bo-show/hide, bo-if, bo-switch
Non interpolate
bo-src, bo-href
Speciali
bo-html, bo-id, bo-title, bo-alt, bo-value
Per tutto il resto
bo-attr bo-attr-foo="bar -> foo="bar"
Data Binding & BindOnce
https://github.com/Pasvaz/bindonce
AngularJs Day - Ancona, 21 Marzo 2014