1

私はEmber JSを学ぼうとしています。そして、私の質問に対する答えが見つかりません。テンプレートがあります

<script type="text/x-handlebars">
      <table class="table">
         {{#each App.todoListController}}
            {{#view App.ViewTable todoBinding="this"}}
               <td>{{title}}</td>
           <td><a href="javascrpt:" {{action "deleteTodo" target="view"}}>X</a></td>
            {{/view}}
         {{/each}}
       </table>
       <button {{action "deleteTodo" target="App.todoListController"}}>Delete</button>
    </div>
</script>

app.js には Controller と View があります。

/*******************
        Controller
*******************/
App.todoListController = Em.ArrayController.create({
    content : [],    
    createTodo : function(title) {
       var todo = App.Todo.create({title:title})
       this.pushObject(todo)
    }
});

/*******************
        View
*******************/
App.ViewTable = Em.View.extend({
    tagName : 'tr',
    classNameBindings : ['isHover:hover'],
    isHover : false,
    todo : null,
    deleteTodo : function(){
        var tr = this.get('todo');
        App.todoListController.removeObject(tr);
    },
    click : function()
    {
        this.set('isHover',true);
    }
})`

table の行をクリックすると、クラスが "hover" に変更されました。ここで質問: すべてのオブジェクトからクラス "hover" を削除できません (オブジェクトを 1 つだけ選択できるようにする必要があります)

PS : 英語で申し訳ありませんが、フォーマットについては申し訳ありません。

4

1 に答える 1

0

これを行う 1 つの方法は、"isHover" プロパティを "todo" アイテムに移動して、コントローラー内のすべての "todo" アイテムを検索し、それらの "isHover" プロパティを設定/設定解除できるようにすることです。

  1. 名前を変更:

    App.ViewTable

    に

    App.TableView

    Ember は、名前の末尾にあるキーワード「View」を探します。

  2. 各ステートメントの項目に名前を追加します (私は「物」を使用しました):

    {{#each thing in App.todoListController}}

    それ以外の ：

    {{#each App.todoListController}}

    そうすれば、後で参照するのが簡単になります。

  3. 上記で定義した名前 (この場合は) をバインディングに使用します (引用符を削除します)。

    {{#view App.TableView todoBinding=thing}}

    それ以外の：

    {{#view App.ViewTable todoBinding="this"}}

    これで、tableView には、表示されている「todo」への参照が含まれます。

  4. 「isHover」を Todo アイテムのオブジェクトに移動します。

    App.Todo = Em.Object.extend({
    title:"...",
    isHover: false
});

  5. テーブル ビューで「isHover」をバインドします。

    ....
tagName : 'tr',
isHoverBinding: 'this.todo.isHover',//this should be before your classNameBindings
classNameBindings : ['isHover:hover'],
...

  6. 「クリック」機能を次のように変更します。

    click : function() {
     //Get a list of the other hovered items from the controller:
    var otherHoveredItems = App.todoListController.get('content').filterProperty('isHover', true);

    //Iterate each hovered item and set hover to false
    for ( var i = 0; i < otherHoveredItems.length; i++) {
        otherHoveredItems[i].set('isHover', false);
    }

    //set this item to hover
    this.get('todo').set('isHover', true);
}

フィドルの例を次に示します: http://jsfiddle.net/amindunited/kY4nh/

もう 1 つの方法は、{{#each}} を collectionView に移動することです。ハンドルバー {{each}} は collectionView であるため、これは大きな飛躍にはなりません。1 つの注意点は、クリック メソッドだけではコンテキストが得られないことですが、クリック関数を eventManager でラップすると、ビューが 2 番目の参照として取得されます...面倒に聞こえますが、実際にはより整然としています: http:/ /jsfiddle.net/amidunited/5hNSZ/

于 2013-06-19T07:34:40.883 に答える