从项目集合中删除项目时更新CompositeView

时间:2014-03-23 20:41:32

标签: marionette

我有一个Marionette.CompositeView。我添加了在Composite的项目视图中从集合中删除项目中的项目的功能。 CompositeView显示一个摘要 - 只不过是它集合中的项目数。

删除项目时更新CompositeView的最佳方法是什么:

app = new Marionette.Application()
app.addRegions
  main: '#main'


app.module 'Views', (views, app)->
  views.MyItemView = Marionette.ItemView.extend
    template: '#my-view-template'
    tagName: 'li'
    events:
      'click' : ()->
        @model.collection.remove @model

  views.MyCompositeView = Marionette.CompositeView.extend
    itemView: views.MyItemView
    template: '#my-composite-view-template'
    itemViewContainer: 'ul'
    initialize: ()->
      @model = new Backbone.Model
        count: @collection.length
      @collection.on 'remove', ()->
        console.log 'remove'

app.on 'start', ->
  app.main.show new app.Views.MyCompositeView
    collection: new Backbone.Collection [
      new Backbone.Model( foo: 'bar')
      new Backbone.Model( foo: 'bar')
      new Backbone.Model( foo: 'bar')                                  
    ]

$ ()->
  app.start()

这是html

  <div  id="main">Hello world</div>

  <script type='htm/text' id='my-view-template'>
  I am dynamic <em><%= foo %></em>
  </script>

  <script type='html/text' id='my-composite-view-template'>
    <div id='counter'><%= count %></div>
    <ul></ul>
  </script>

1 个答案:

答案 0 :(得分:3)

集合和复合视图将重新呈现子项视图(和/或删除单个项视图)。在您的情况下,您希望在添加或减去集合时重新呈现整个复合视图。为此,将render方法绑定到视图定义中的相应集合事件:

collectionEvents: {
  "add": "render",
  "remove": "render"
}