1

プレーヤー オブジェクトごとに 2 つの行を持つ基本的なテーブルを実装しようとしています。1 つはテキスト フィールドで満たされた編集行で、もう 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」を設定しようとしましたが、何も解決せず、アクションから false を返すことも、そこでの伝播を防ぐこともできませんでした。アクション内のアラート ステートメントは、それが 1 回だけ呼び出されていることを示します (つまり、兄弟ビューごとに 1 回ではありません)。私は Ember を初めて使用するので、私が間違っていることについての提案をお待ちしています!

4

1 に答える 1

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>
于 2013-11-07T05:58:54.680 に答える