Ember将组件模板绑定到模型

Question

嗨，我有以下组件模板：

test-component.hbs: (produces img tag per model)

{{#each titleModels}}
<div class="item">
    <img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
</div>
{{/each}}

它在父模板中使用

parent.hbs:
{{test-component action="titleClicked" parentController=controller titleModels=model}}

在titleClicked动作上，假设要删除clickedModel并刷新模板以显示已删除的视图。

parent-controller.js:
   modelChanged: false,
   actions: {
        titleClicked: function(){
           self.get('model').removeObject(aSelectedModel);
           self.set('modelChanged',true);
         }
   }

测试组件观察到titleModel的更改并重新渲染模板：

test-component.js:

titleModelsChanged: function(){
   this.rerender();
 }.observes('parentController.modelChanged'),

this.rerender方法已成功调用，并且删除的模型的特定html标签（例如，下面定义的html标签）不再如预期那样在DOM中从test-component.hbs生成的html页面中出现。

 <img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>

检查dom时，会显示其余模型的img标签。 但是，即使当我检查元素时DOM中也存在它们，它们也不会显示在实际的html页面上（我看不到实际的img）。

重新显示后在html页面上如何显示其余模型的img标签？

Answer 1

首先，有两个小笔记。 <img>标签不得包含结束标签。 因此，除了<img></img>之外，只需<img> （或<img /> ）即可。

在当前和将来的Ember.js版本中，不建议使用更改上下文的{{each}} 。 因此，您应该将组件重写为

{{#each titleModels as |titleModel|}}
  <div class="item">
    <img {{action "owlItemClicked" titleModel.id titleModel.index on="click" }} {{bind-attr src=titleModel.img}}>
  </div>
{{/each}}

现在到您的问题。 假定<img>标记位于DOM中，但实际图像不可见，则问题必须出在图像的src属性中。 如果在单独的标签中的src中打开URL，您是否看到了应该看到的图像？

JSBin http://emberjs.jsbin.com/mitadovero/edit?html,js，输出解决了这个问题。