0

我在 Backbone 的世界里还是个新手，我决定将 Marionette 用于我的第一个严肃项目。

遇到一些困难，我设法设置了我的应用程序的基本选项和路由，我对此非常满意，但现在我面临一个表示表格的 CompositeView 的阻塞问题。

此视图呈现在特定布局的区域内，称为“网格”。此布局有 3 个区域：top_controls、table_view 和 bottom_controls。由于我需要对布局的某些元素绑定一些操作，因此我决定将其用作视图，并在其中包含“主”集合，因此我可以在 CompositeView 中呈现集合的过滤版本，不接触主要的。

从我的路由器我这样称呼它：

App.grid = new Grid({collection: Clt});
App.page.show(App.grid);

布局的结构是这样的（我使用的是requireJS）：

var Grid = Backbone.Marionette.Layout.extend({

        className: "container-fluid",

        template: gridLayout,

        regions: {
            top_controls: "#top_controls",
            table_view: "#table_view",
            bottom_controls: "#bottom_controls",
        },

            initialize: function(){

                this.renderTable(this.collection, true);                 
            },

            renderTable: function(collection, fetch){

                if(fetch){

                    collection.fetch({success:function(){

                        var vista = new CompView({collection: collection});                            
                        App.grid.table_view.show(vista);

                    }});

                } else {

                    var vista = new CompView({collection: collection});                      
                    App.grid.table_view.show(vista);                       
                }
            },

            events: {
                "keyup input":"filter_grid"
            },

            filter_grid: function(e){

                var $el = e.currentTarget;
                var to_filter = $($el).val();

                if(to_filter==""){

                    this.renderTable(this.collection, false);

                } else {

                    var filtered = this.collection.filter(function(item){
                        return item.get("link_scheda").toLowerCase() == to_filter;

                    });

                    if(filtered.length>0){

                       var filtro = new AssocCollection();

                       filtro.reset(filtered);

                       this.renderTable(filtro, false);
                    }
                }                   
            }
    });

    return Grid;

布局模板如下所示：

<div class="row-fluid" id="top_controls"><input type="text" id="filter" class="input"/></div>
<div class="row-fluid" id="table_view"></div>
<div class="row-fluid" id="bottom_controls"><button class='add btn btn-primary'>Add</button></div>

我的 CompositeView 的结构是这样的：

var AssocView = Backbone.Marionette.CompositeView.extend({

    tagName: 'table',
    className: 'table table-bordered table-striped',
    id: 'tableAssoc',
    template: assocTemplate,
    itemView: assocRow,

    appendHtml: function(collectionView, itemView, index){
        collectionView.$("tbody").append(itemView.el);
    },

    events: {
        "click .sort_link":"sort_for_link",
    },

    sort_for_link: function(){

        this.collection.comparator = function(model){

            return model.get("link_value");
        }

        this.collection.sort();

    },

    onRender: function(){
        console.log("render table!");

    }

});

return AssocView;

表格的第一次显示是正确的，过滤也是如此。当我单击带有“sort_link”类的表头时会出现问题：整个表从 HTML 中删除，而集合保持不变（我认为整个布局被重新渲染）。例如，如果我在另一个地方渲染 CompositeView，比如应用程序的主区域，它就会按预期工作。所以我想问题是它位于我的布局声明中。

任何帮助都感激不尽！

4

1 回答 1

0

在您的Grid中，您需要覆盖该initialEvents方法并且不要在其中执行任何操作。


Grid = Backbone.Marionette.Layout.extend({

  initialEvents: function(){},

  // ... everything you already have

});

Layout从ItemView扩展而来，ItemView提供了initialEvents实现。这个方法检查它是否被赋予了一个集合，如果有，它将集合“reset”事件连接到视图的“render”方法。在您的情况下，您正在传递集合并且不希望这种行为。因此，覆盖 initialEvents 方法将更正它。

更新：我以为我initialEvents很久以前就删除了。如果您要使用 Marionette 版本保持最新，请获取 v0.9.10（或任何最新版本），这个问题现在就消失了。

于 2012-08-09T21:36:35.323 回答