Emberjs itemController /控制器属性绑定

Question

I've made a jsbin to illustrate my issue.

the binding seems KO with lastname property defined inside the itemController and the fullname value is not updated in my items loop.

What am I doing wrong ?

Answer 1

Controller for item in list is different than one you edit property lastname for, so it will never get updated. Propery lastname has to be specified as Model's property (if using Ember Data you simply don't use DS.attr for it and it won't be persisted). If you use custom library for data persistence you have to manually remove lastname property. You can use Ember Inspector extension to see that there are 5 controllers when you click on item. 4 for each item in list and one is being generated when you click. You edit property lastname for this fifth controller. To solve this you can use: JavaScript:

App = Ember.Application.create();

App.Router.map(function() {
 this.resource('items', function() {
   this.resource('item', {path: '/:item_id'});
 });
});

App.Model = Ember.Object.extend({
   firstname: 'foo',
   lastname: 'bar',
   fullname: function() {
     return this.get('firstname') + ' ' + this.get('lastname');
   }.property('firstname', 'lastname')
});

App.ItemsRoute = Ember.Route.extend({
  model: function() {
    return [App.Model.create({id: 1}), App.Model.create({id: 2}), App.Model.create({id: 3}), App.Model.create({id: 4})];
  }
});

App.ItemRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('items').findBy('id', +params.item_id);
  }
});

Templates:

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{link-to "items" "items"}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="items">
    <ul>
    {{#each item in model}}
      <li>
        {{#link-to 'item' item.id}}
        {{item.fullname}} {{item.id}}
        {{/link-to}}
      </li>
    {{/each}}
    </ul>

    {{outlet}}
  </script>

   <script type="text/x-handlebars" data-template-name="item">
     {{input value=model.firstname}}
      {{input value=model.lastname}}
      {{model.fullname}}
  </script>

Please keep in mind that ArrayController and ObjectController aren't recommended to use, because they will be deprecated in future. Demo.