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);
         }
   }

测试组件观察titlesModel的变化并重新渲染模板：

test-component.js:

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

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

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

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

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,output 解决了这个问题。