Как наблюдать встроенные массивы в Ember-объектах?

Question

В Ember.js создание наблюдателя, который реагирует на изменения под-свойств, который является массивом, приводит к неинтуитивному поведению. Если наблюдатель напрямую наблюдает свойство массива, он не запускается, а если он наблюдает привязку к тому же свойству, он работает так, как ожидалось.

Простой пример:

Рули:

<script type="text/x-handlebars"> 
    <b>App.View1.name:</b> {{App.View1.name}} <br /> 
    <b>App.View2.name:</b> {{App.View2.name}} 
</script> 

Javascript:

App = Em.Application.create(); 

// A common dependency for two views 
var dependency = Em.Object.create({ 
    prop: [] 
}); 

// Directly observes dependency.prop 
App.View1 = Em.View.create({ 
    dependency: dependency, 
    name: "Foo", 
    changeName: function() { 
     this.set("name", "Bar"); 
    }.observes("dependency.prop") 
}); 

// Indirectly observes dependency.prop via a binding 
App.View2 = Em.View.create({ 
    dependency: dependency, 
    name: "Foo", 
    changeName: function() { 
     this.set("name", "Bar"); 
    }.observes("prop"), 
    propBinding: "dependency.prop" 
}); 

// Updating the 'prop' property of dependency with an element. 
dependency.get("prop").pushObject("An object."); 

Я поставил его на JSFiddle здесь: http://jsfiddle.net/kbaXG/50/

H ere, App.View1.name не обновляется (остается «Foo»), а App.View2.name обновляется (до «Bar»).

Является ли это ожидаемым поведением и создает привязку приемлемое обходное решение?

Answer 1

Наручники является фундаментальным понятием в ember.js, так что не стесняйтесь использовать его :)

Ваш пример работает, если вы создаете привязку для вашего dependency см http://jsfiddle.net/pangratz666/Gqc7Q/:

App = Em.Application.create({ 
    VERSION: "0.1" 
}); 

App.dependency = Em.Object.create({ 
    prop: [] 
}); 

App.View1 = Em.View.create({ 
    dependencyBinding: 'App.dependency', 
    name: "Foo", 
    changeName: function() { 
     this.set("name", "Bar"); 
    }.observes("dependency.prop") 
}); 

App.View2 = Em.View.create({ 
    dependencyBinding: 'App.dependency', 
    name: "Foo", 
    changeName: function() { 
     this.set("name", "Bar"); 
    }.observes("prop"), 
    propBinding: "dependency.prop" 
}); 

// Updating the 'prop' property of dependency. 
dependency.get("prop").pushObject("An object."); 

---

UPDATE

проблема заключалась в том, что вы меняете содержимое уплотнительные f массив, а не сам массив. Поэтому вам нужно изменить путь наблюдателя на dependency.prop.@each, см. http://jsfiddle.net/pangratz666/3QccA/. Но я не знаю, почему он работает с привязкой, а не с этим ... Вы должны подать билет на GitHub.

В последней ноты, указанное решение с использованием привязок является подход, который является более угасающий, как ...

var dependency = Em.Object.create({ 
    prop: [] 
}); 

App.View1 = Em.View.create({ 
    dependency: dependency, 
    name: "Foo", 
    changeName: function() { 
     this.set("name", "Bar"); 
    }.observes("dependency.prop.@each") 
}); 

App.View2 = Em.View.create({ 
    dependency: dependency, 
    name: "Foo", 
    changeName: function() { 
     this.set("name", "Bar"); 
    }.observes("prop"), 
    propBinding: "dependency.prop.@each" 
}); 

// Updating the 'prop' property of dependency. 
dependency.get("prop").pushObject("An object.");