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标记（例如下面定义的标记）不再出现在test-component.hbs生成的html页面的DOM中。

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

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

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

Answer 1

首先，两个小笔记。 <img>代码不得包含结束标记。所以不是<img></img>，而只是<img>（或者<img />）。

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

{{#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中的网址，您是否会看到您应该看到的图片？

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

Ember绑定组件模板到模型

1 个答案: