Backbone Marionette:CompositeView替换项目而不是附加项目

时间:2013-08-23 20:40:25

标签: backbone.js marionette

我有一个木偶CompositeView,我正用它来填写下拉列表。当我从CompositeView中调用collection.fetch()时,JSON响应是干净的,但是,而不是追加新的ItemViews,CompositeView似乎在DOM中替换它们

这是我的代码(coffeescript):

class @PDCollectionItemView extends Backbone.Marionette.ItemView
    el: 'li'
    template: Handlebars.compile('{{ title }}')

class @PDCollectionsView extends Backbone.Marionette.CompositeView
    id: 'pd_collections'
    className: 'selection'
    itemView: PDCollectionItemView
    itemViewContainer: '.scroll ul'
    template: HandlebarsTemplates['connections/collection_select'] #handlebars_assets gem

    ui:
        modalTrigger: '#pd_collection_selector'
        modal : '#pd_selection_modal'
        selectBtn : '#select_collection'

    initialize: ->
        @selectedCollection = undefined
        Connectors.App.vent.on "connections:collectionStaged", @assignSelectedCollection

return @PDCollectionsView

调用fetch的父布局:

class @IndexLayout extends Backbone.Marionette.Layout
    initialize: ->
        @collections = new PDCollectionsCollection
        @collectionsView = new PDCollectionsView
            collection: @collections

    onRender: ->
        @collectionSelect.show @collectionsView

        @collections.fetch
            success: (collection, response, options) =>
                Connectors.App.vent.trigger "connections:collectionsLoaded"
                Connectors.App.vent.trigger "loadComplete"

            error: (collection, response, options) =>
                console.log response

我尝试通过appendHTML调用手动附加项目,但我得到了相同的行为。我可以通过调用itemView上的onAfterItemAdded来记录每个@PDCollectionsView,并且项目视图 不同;不同的电视和适当的模型。

1 个答案:

答案 0 :(得分:0)

我认为问题在于您使用Backbone的fetch操作。 fetch将集合与服务器上的状态“同步”。在不指定任何自定义的情况下,它将智能地添加新项目,更新已更改的项目以及不再在服务器上删除项目。我猜测如果你在调用fetch后检查集合,你会发现它只有在CompositeView中呈现的项目。

您可以通过传递fetch来修改{remove: false}的行为以同步到服务器而不删除任何内容。这应该会产生您正在寻找的结果:

    @collections.fetch
        remove: false

        success: (collection, response, options) =>
            Connectors.App.vent.trigger "connections:collectionsLoaded"
            Connectors.App.vent.trigger "loadComplete"

        error: (collection, response, options) =>
            console.log response