Angularjs

Data Binding & BindOnce

https://github.com/Pasvaz/bindonce

Pasquale Vazzana

Senior Developer

AngularJs Day - Ancona, 21 Marzo 2014

Data Binding

One Way (One-Time)

Two Way

Two-Way Binding

Ciao pippo

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";
    }

Interpolazione

Sintassi semplificata

    Ciao {{name}}

Sintassi equivalente e preferibile

    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>

Vantaggi del Dirty checking

Sintassi Semplice

$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') );

Vantaggi del Dirty checking

REnder Asincrono del DOM

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);
}

Svantaggi del Dirty checking

+WATCHERS = +LAG!!!

demo

2 SOLUZIONI

Soluzione 1:

UI Design

Progettare la UI in modo da non superare i 2000 watcher.

2000 è una cifra orientativa, non vi è certezza che vada sempre bene.
difficile prevedere e tenere sotto controllo l'ammontare dei watchers, specialmente nei casi di scrolling senza paginazione.

2 SOLUZIONI

Soluzione 2:

BindOnce

 <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>

demo

Directives

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"

GRAZIE!!!