根据不同的模块事件更改视图内容

Question

我的内容框模块枚举一个集合，并为每个项目创建一个容器视图（将模型传递给视图）。它将初始内容设置为其模型的content属性。基于模型中的布局属性，容器视图附加到DOM。这是由“_contentBoxCreate”方法启动的。

内容框模块响应侧面菜单中子项的点击。 sidemenu在不同的模块中实现。 sidemenu子单击事件也传递一个包含sub_id和一些文本内容的对象。我想从这个对象中获取内容并使用它来更新容器视图。

目前我通过“_sideMenuClick”方法执行此操作。在backbonejs中，是否有更新视图内容的最佳实践，因为其模型上没有更改数据？

感谢，

W.L。

APP.module("contentbox", function(contentbox) {

    //Model
    var Contentbox = Backbone.Model.extend({});
    //Collection
    var Contentboxes = Backbone.Collection.extend({
        model: Contentbox,
        url: 'ajax/contentboxResponse/tojson'
    });

/*
 * View:
 */
    var Container = Backbone.View.extend({
        initialize: function() {

            contentbox.on('update', jQuery.proxy(this.update, this)); 
            contentbox.on('refresh', jQuery.proxy(this.render, this));

            var TemplateCache = Backbone.Marionette.TemplateCache;
            this.template = TemplateCache.get("#contentbox-container");

        },
        render: function() {

            var content = this.model.get('content').toString();
            var html = this.template({content: content});

            this.$el.html(html);//backbone element

            return this;
        },
        update: function(fn) {

            var content = fn.apply(this);

            if (content !== null) {

                var html = this.template({content: content});

                this.$el.html(html);
            }
        }
    });

    //collection 
    var contentboxes = new Contentboxes();

    var _sideMenuToggle = function() {
        contentbox.trigger('refresh');
    };

    var _sideMenuClick = function(sideMenu) { //view contex

        var fn = function() {
            // this fn will have the context of the view!!
            var linksub = this.model.get('linksub').toString();
            if (linksub === sideMenu.id.toString()) {
                return sideMenu.content.toString();
            }
            return null;
        };

        contentbox.trigger('update', fn);
    };

    var _contentBoxCreate = function() {
        var create = function(cboxes) {
            cboxes.each(function(model) {
                var layout = "#body-" + model.get('layout');
                var $el = jQuery(layout);
                var container = new Container({model: model});
                $el.append(container.render().$el);
            });
        };
        contentboxes.fetch({
            success: create
        });
    };


    this.on("start", function() {
        _contentBoxCreate();
    });

    this.addInitializer(function() {
        APP.vent.on('sidemenu:toggle', _sideMenuToggle);
       APP.reqres.setHandler('sidemenu:submenu', _sideMenuClick);//event and content...
                                                             //from another module        
    });

});

更新

更改了视图...

/*
 * View
 */
var Container = Backbone.View.extend({
   initialize: function() {

 this.renderableModel = this.model; // Define renderableModel & set its initial value 

       contentbox.on('update', this.update, this);
       contentbox.on('refresh', this.reset, this); // 3rd param gives context of view

        var TemplateCache = Backbone.Marionette.TemplateCache;
        this.template = TemplateCache.get("#contentbox-container");

    },
    render: function() {
        var content = this.renderableModel.get('content').toString();
        var html = this.template({content: content});

        this.$el.html(html);//backbone element

        return this;
     },
     update: function(fn) {
        /**
         * The "update" event is broadcasted to all Container views on the page.
         * We need a way to determine if this is the container we want to update.
         * Our criteria is in the fn 
         */
        var content = fn.apply(this); //criteria match return content, else null.

        /*
         * The render method knows how to render a contentbox model
         */
    if (content !== null) {

    this.renderableModel = new Contentbox();

    this.renderableModel.set({content: content}); //add content to new contentbox model

    this.render(); //Rerender the view
      }
    },
    reset: function() {

        this.renderableModel = this.model;

        this.render(); // restore view to reflect original model
     }
  });