Question

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

在我的主模板中，我使用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”，但这并没有解决任何问题，也没有从我的动作中返回false，或者阻止在那里传播。操作中的警告语句表明它只被调用一次（因此，对于每个兄弟视图，不是一次）。我是Ember的新手，所以我愿意接受有关我做错的任何建议！

Answer 1

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

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>

以视图为目标的操作传播到同级视图

1 个答案: