Question

我在'pages'ArrayProxy对象中保存了6个'page'对象。

我有一个StateManager实例，它将调节与这6个'page'对象相对应的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
        })
    })
});

绑定到ArrayProxy中的模型

1 个答案: