綁定到ArrayProxy中的模型

Question

我有6個'page'對象保存在'pages'ArrayProxy對象中。

我有一個StateManager實例，將調節對應於這6個'頁面'對象的6個視圖。

App.stateManager = Ember.StateManager.create({ 
    rootElement: '.tab-content', 
    initialState: 'firstTab', 
    firstTab: Ember.ViewState.create({ 
    view: Ember.View.extend({ 
     templateName: 'first', 
     contentBinding: 'App.tempObject'// binding to a regular Ember Object works. 
    }) 
    }), 
    secondTab: Ember.ViewState.create({ 
    view: Ember.View.extend({ 
     templateName: 'second', 
     contentBinding: 'WHAT GOES HERE?'//how to bind to an object in an array 
    }) 
    }) 

問題是，不清楚如何將視圖綁定到ArrayController中的特定對象。

我有一個的jsfiddle示出這裏的問題：http://jsfiddle.net/lifeinafolder/xUNUN/

爲了說明的目的，所述的jsfiddle只有2個狀態，而不是所有6.

類似的問題如下所示：Ember.js binding models stored within an array。解決方案雖然不是很清楚。

Answer 1

您可以創建一個計算的屬性，它返回特定的索引對象，見http://jsfiddle.net/pangratz666/MUUs3/：

App.ObjectAtBindable = Ember.Mixin.create({ 
    targetObject: function() { 
     var objectIndex = this.get('objectIndex'); 
     var controller = this.get('controller'); 
     if (controller) { 
      return controller.objectAt(objectIndex); 
     } 
     return null; 
    }.property('controller', 'objectIndex').cacheable() 
}); 

App.stateManager = Ember.StateManager.create({ 
    firstTab: Ember.ViewState.create({ 
     view: Ember.View.extend(App.ObjectAtBindable, { 
      templateName: 'first', 
      contentBinding: 'targetObject', 
      controllerBinding: 'App.controller', 
      objectIndex: 0 
     }) 
    }) 
});