CODEWITHSUNDEEP
angularjsangular-components
raneshu
raneshu

Reputation: 413

should I pass a JSON string with one-time binding to a component to reduce watchers

Question: is this a good practice even though it increases performace by reducing watchers

Using Angular 1.5. Creating a table(with infinite scroll) where the content of almost every cell is a component.

There are over 500 watchers on the page at any given time and this is causing a rendering lag when scrolling down.

To reduce bindings, I would like to always pass data from parent to child component as a string (JSON string when I pass objects) with one-time binding

like so: 

//In parent component (table component) controller:

this.name = "bob"
this.info = {city: "ABC", country: "AAA", zip: "100001", location "123 ABC"};
this.JSONStringifiedInfo = JSON.strigify(this.info);

// In parent view
<table>
<tr>
<table-cell-component-1 info={::$ctrl.JSONStringifiedInfo } name={::$ctrl.name}></table-cell-component-1>
</td>...


//and now in table-cell-component-1 controller

...
 bindings: {
    info: '@',
    name: '@'
},

this.parseInfo = JSON.parse(this.info);
this.name = ...

//and I then just use $ctrl.parseInfo in template...

Upvotes: 0

Views: 81

Answers (1)

georgeawg
georgeawg

Reputation: 48968

One-time binding

An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value.

-- AngularJS Developer Guide - Expressions - One-Time Binding.

Use one-time one-way bindings to reduce digest cycle overhead:

 <my-component info="::$ctrl.infoObject"></my-component>

JS

 app.component("myComponent", {
     bindings: {info: "<"},
     template: '<p>{{::$ctrl.info}}</p>',
 });

Upvotes: 1

Related Questions