Ember.js - 模型内部组件

Question

I am making an app just for practice and i have a doubt in a component's function "didReceiveAttr". When i pass my MODEL in my template and then i erase some element in it the function doesnt work, but if i pass "model.length" in the template and then erase something the function work!

My component template

<h1>Tasks ({{totalTask}})</h1>

My component JS

  totalTask: null,

  didReceiveAttrs(){
    this._super(...arguments);
    this.set('totalTask', this.get('model.length'));
    console.log(this.get('model'));
  }

My primary template

{{task-list model=model}}

or

{{task-list model=model.length}}

Answer 1

This is indeed the expected behavior; just look at Ember guide about how didReceiveAttrs works. It is clearly stated that " didReceiveAttrs hook is called every time a component's attributes are updated". When you add to or remove from an array the array itself does not change; hence didReceiveAttrs is not executed. It is only executed when the initial assignment to model is performed.

I prepared this twiddle to illustrate you a better ember way to handle this case. You should rely on computed properties as much as you can; hence I added computedTotalTask as a computed property to my-component.js and it relies on model.length as you can see.

Answer 2

{{task-list modelLength=model.length}}

Here you are assigning model.length as modelLength property to the component. so initially didReceiveAttrs will be called as component is receiving modelLength property and when you add one more element to model then modelLength property itself changed so this will invoke didReceiveAttrs before re-render.

{{task-list modelTaskList=model}}

Here modelTaskList is pointing to array, so when you add/remove item through KVO compliant method such as pushObject it will be reflected in component too. but the modelTaskList is still pointing to the same array so didReceiveAttrs hook will not be called. Suppose if you assigned different array then you can see the didReceiveAttrs is called.

Answer 3

You could always just set this as a computed property, ensuring updates in the event of the bound variable being updated.

Within your component, set up a computed property that will watch for a change to your model, then update the variable modelLength with the change

modelLength: Ember.computed('model', function(){
  return this.get('model').length;
}

Then, within your handlebars template, reference this length

<h1>Tasks{{#if modelLength}} ({{modelLength}}){{/if}}</h1>