Emberjs itemController/control property binding

Question

Я сделал jsbin, чтобы проиллюстрировать мою проблему.

Связывание кажется KO с атрибутом lastname, определенным внутри элемента itemController, а значение fullname не обновляется в цикле элементов.

Что я делаю неправильно?

Answer 1

Контроллер для элемента в списке отличается от выбранного вами свойства lastname, поэтому он никогда не будет обновлен. Правило lastname должно быть указано как свойство модели (при использовании Ember Data вы просто не используете DS.attr для этого, и это не будет сохраняться). Если вы используете пользовательскую библиотеку для сохранения данных, вам необходимо вручную удалить свойство lastname. Вы можете использовать расширение Ember Inspector, чтобы увидеть, что есть 5 контроллеров, когда вы нажимаете на элемент. 4 для каждого элемента в списке и один создается при нажатии. Вы редактируете свойство lastname для этого пятого контроллера. Чтобы решить эту проблему вы можете использовать: 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); 
    } 
}); 

Шаблоны:

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

Пожалуйста, имейте в виду, что ArrayController и ObjectController не рекомендуется использовать, так как они будут устаревшими в будущем. Demo.