Question

我有一些观点，与他们各自的模型完全吻合：

image.handlerbars：

URL:{{view Ember.TextField 
  valueBinding="EvEditor.imageModel.imgUrl" 
}}<br/>

text.handlerbars：

{{view Ember.TextField 
 valueBinding="EvEditor.titleModel.text" 
}}<br/>

我现在想创建一个包含许多图像和文本块的复合视图：

var container = Ember.ContainerView.create({
    childViews: ['firstView', 'secondView', 'thirdView', 'fourthView'],
    firstView: App.TextView,
    secondView: App.TextView,
    thirdView: App.ImageView,
    fourthView: App.ImageView
});

现在，就目前而言，每个ImageView和TextView都将包含相同的数据，而不是为每个数据分配不同的ImageModel / TextView实例。

构建此类事物的最佳方法是什么？我真的不希望我创建视图的代码也必须知道需要将哪些属性传递到每个视图中，例如，我吗？

理想情况下，我会写这样的伪代码：

var container = Ember.ContainerView.create({
    childViews: ['firstView', 'secondView', 'thirdView', 'fourthView'],
    firstView: {view=App.TextView, model=App.EmberObjectincomingData[0]},
    secondView: {view=App.TextView, model=App.EmberObjectincomingData[1]},
    thirdView: {view=App.ImageView, model=App.EmberObjectincomingData[2]},
    fourthView: {view=App.ImageView model=App.EmberObjectincomingData[3]},
});

Answer 1

使用类似https://stackoverflow.com/a/10225570/466772的内容，然后添加到CollectionView：

for( var i=0;i<data.req.length;i++ ){
   var type=data.req[i],model={};
    if ( type == 'image'){
      model=imageModel.fromChangeFormat( data.data[i] );
    }else if (type.indexOf('title') >-1 || type.indexOf('text') > -1 ){
      data.req[i]='text';
      model=Ember.Object.create({                   
        text    : data.data[i]
       });
    }
    window.App.controller.addItem( data.req[i]+'View', model );
}

其中window.App.controller是

controller = Em.ArrayProxy.create({
    content: [],
    addItem: function(itemType,data) {
        this.pushObject(App.Item.create({
            itemType: itemType,
            data:data
        }))
    }
});

然后每个View模板都可以引用view.content.data.foo，其中foo是该视图的正确模型中的属性。

如果模型需要将客户观察者或事件处理程序附加到View的每个项目，您可以在返回视图的字符串之前在MyView中执行此操作（此上下文是视图）。

使用不同的模型绑定向Ember的ContainerView添加许多相同的视图

1 个答案: