如何在Ember.js中創建一個多選列表

我想弄清楚如何構建一個小應用程序，它包含一個列表，您可以選擇多個項目並切換到選擇全部/無並查看當前選定的數量行。如何在Ember.js中創建一個多選列表

我相信「選定」狀態不應該是模型對象的一部分，但我無法真正弄清楚如何去做。

這是我的當前設置（不顯着工作還沒有）

運行的代碼http://jsfiddle.net/jacobk/rU35G/1/

var App = Ember.Application.create(); 

App.ApplicationRoute = Ember.Route.extend({ 
    model: function() { return Ember.A(["Foo", "Bar", "Baz"]); } 
}); 

App.ApplicationController = Ember.ArrayController.extend({ 
    allSelected: false, 

    selectedCount: function() { 
     return 0; 
    }.property() 
}); 

App.RowController = Ember.ObjectController.extend({ 
    isSelected: false 
});

<script type="text/x-handlebars" data-template-name="application"> 
    <h3>{{ selectedCount }} rows selected.</h3> 
    <label> 
    {{view Ember.Checkbox checkedBinding="allSelected"}} 
     Toggle select all 
    </label> 
    <hr/> 
    <ul> 
    {{#each controller itemController="row"}} 
     <li {{bindAttr class="isSelected"}}> 
      {{view Ember.Checkbox checkedBinding="isSelected"}} {{this.content}} 
     </li> 
    {{/each}} 
    </ul> 
</script>

如果個別「行項目」使用自定義視圖中控制每行或像上面的提琴那樣的自定義控制器
如何將ArrayController中的「全選」傳播到所有個人控制器（或意見，如果這是一個更好的契合）

我想了解何時使用綁定，觀察者，屬性，「需要」等，當它適當使用控制器與視圖等。我還沒有想到在呃應用程序中的信息/數據的一般流程。

例如如果上述示例中的ArrayController遍歷「包含的」視圖/控制器並在「全選」複選框切換時更改「選定」狀態或如果所有「子控制器」都觀察/「綁定到」 ArrayController並在更改時自行更改，如果是這樣，我應該如何向相反的方向傳播數據。 ArrayController如何獲得「所有當前選定的」行？

我很想看到這個「規範的解決方案」。

來源

2013-02-22 sris

不需要行控制器。 @each，計算屬性和checkedbinding可以用來解決這個問題，如下所示。 isSelected必須在陣列控制器的內容中定義：

App.ApplicationController = Ember.ArrayController.extend({ 

     allSelected: function(key, value) { 
    if (value !== undefined) { 
    // when check box is ticked, this gets executed 
     this.setEach('isSelected', value); 
     return value; 
    } else { 
     //as a computed property 
     return !!this.get('length') && 
     this.everyProperty('isSelected', true); 
    } 
    }.property('@each.isSelected') 

     selectedCount: function() { 
      return 0; 
     }.property() 
    });

來源

2013-02-22 12:53:29 Dinesh

正如我所說，我不認爲將所選狀態置於模型/內容元素中是正確的。這看起來像一個純粹的UI關注，如果可能的話，我想保留它的數據。 – sris 2013-02-22 13:20:34

我同意保持選定狀態不在模型中。您需要在Ember.ArrayController中定義itemController。

這裏是一個工作示例。 http://jsbin.com/sunat/3/edit

App.RowController = Ember.ObjectController.extend({ 
    isSelected: false 
}); 

App.IndexController = Ember.ArrayController.extend({ 
    itemController: 'row', 

    selectAll: function(key, value) { 

    if (arguments.length == 2) { 
     this.setEach('isSelected', value); 

     return value; 
    } else { 

     return this.isEvery('isSelected', true); 
    } 
    }.property('@each.isSelected') 
}); 

#template 
<script type="text/x-handlebars" id="index" > 
    <label> 
    {{input type="checkbox" checked=selectAll}} 
    Toggle select all 
    </label> 
    <hr/> 
    <ul> 
    {{#each}} 
    <li> 
     {{input type="checkbox" checked=isSelected}} {{name}} 
    </li> 
    {{/each}} 
    </ul> 
</script>

來源

2014-03-06 00:16:00

如何在Ember.js中創建一個多選列表

回答

相關問題