1

我正在尝试实现一个基本表，每个播放器对象有两行。一个是编辑行，用文本字段填充，另一个是视图行。

在我的主模板中，我使用 CollectionView 来呈现一组行（玩家是一个集合）

<table>
  {{view Ember.CollectionView contentBinding="players" itemViewClass="App.PlayerView"}}
</table>

然后我定义了一个自定义视图来接收点击操作：

App.PlayerView = Ember.View.extend({
 templateName: 'rosters/player_view',
 isShowVisible: true,
 actions: {
   toggleVisibility: function(){
     this.toggleProperty('isShowVisible');
   }
  }
});

最后，我为视图创建了模板：

{{#if view.isShowVisible}}
  <tr>
    <td>{{view.content.name}}</td>
    <td><a {{action "toggleVisibility" target="view"}}>Edit</a></td>
  </tr>
{{else}}
  <tr>
    <td>{{input type="text" value=view.content.name}}</td>
    <td><a {{action "toggleVisibility" target="view"}}>Done</a></td>
{{/if}}

我想要发生的是，当我按下“编辑”链接时，它会隐藏文本行，并显示输入行。发生的情况是，如果我按下第一个链接，它工作正常，但是，假设我按下第 10 个链接，它将隐藏 1-10 的显示行，然后只显示 10 的编辑。这几乎就像事件是从集合传播到兄弟视图，或者它们的属性以某种方式链接？

我尝试在动作上设置“bubble = false”，但这并没有解决任何问题，也没有从我的动作中返回假，或者阻止在那里传播。动作中的警告语句表明它只被调用一次（因此，每个同级视图都不会调用一次）。我是 Ember 的新手，所以我愿意接受任何关于我做错了什么的建议！

4

1 回答 1

1

这实际上是因为 else 语句中缺少结束 tr 标记。虽然这最终是问题所在，但我认为当 metamorph 删除并添加表行时，浏览器会出现问题，但这可以通过将 tr 标签从 if 语句中拉出来轻松解决。

http://emberjs.jsbin.com/EXEnUZE/1/edit

<script type="text/x-handlebars" data-template-name="rosters/player_view">
  <tr>  
    {{#if view.isShowVisible}}
      <td>{{view.content.color}}</td>
      <td><a {{action "toggleVisibility" target="view"}}>Edit</a></td>
    {{else}}
      <td>{{input type="text" value=view.content.color}}</td>
      <td><a {{action "toggleVisibility" target="view"}}>Done</a></td>
    {{/if}}
  </tr>
</script>
于 2013-11-07T05:58:54.680 回答