如何从 backbone 中不同选项卡中的一个视图刷新其他视图的 ui？

Question

我是 backbone 的新手，在我当前的项目中我们使用 Backbone 和 Requirejs。 有 4 个选项卡说 A、B、C、D。在选项卡 A 中，我将一些数据保存在数据库中，在选项卡 D 中，从选项卡 A[=37= 中保存的数据] 应该是 displayed.So，我在选项卡 A 中的保存操作完成后调用选项卡 D 的渲染方法。

第一次加载屏幕时，所有选项卡都会正确加载正确的数据。 但是当我从选项卡 A 保存数据并调用选项卡 D 的渲染方法时它不会更新 ui.Problem 是 render() 被正确调用，但选项卡 D 中的 ui 没有刷新。

以下是选项卡 A 的虚拟代码：

define(['jquery','backbone','underscore','views_jira/tabDView'],
    function($,Backbone,_,TabDView) 
    {
        var TabAView = Backbone.View.extend({
            tabDView:new TabDView(),
            render:function(){
                this.model.save(objectToSave,{
                        success: _.bind( this.saveSuccessCallback, this ),
                        error: _.bind( this.saveErrorCallback, this )
                    });
            }
        });


        saveSuccessCallback: function ( model, response ) {
                tabDView.render()
        },

        saveErrorCallback:function ( model, response ) {
        }
    }
);

以下是选项卡 D 的代码：

 define(['jquery','backbone','underscore','collections'],
    function($,Backbone,_,DataCollection) {
        var TabDView = Backbone.View.extend({
             el:'#myViewDivinHtmlBody'
            dataCollection:new DataCollection();
            render:function(){
                this.dataCollection.fetch({
                    success: _.bind(this.handleOpendTicketsSuccessCallback, this),
                    error: _.bind(this.handleOpendTicketsErrorCallback, this)
                });
            },
            handleOpendTicketsSuccessCallback:function(model, response, fetchOptions){
                this.$el.find('.mydiv').append(response);
            },
            handleOpendTicketsErrorCallback:function(model, response, fetchOptions){
                 console.log("Error in fetching the  tickets");
            } 

        });

        return TabDView;
    }
)

谁能告诉我哪里出错了。 Note:there 没有控制台错误。

Answer 1

您的 Backbone 视图需要被告知要附加到 DOM 的哪个元素。如果您没有以某种方式指定它，那么 el 和 $el 将分配给分离的 <div> 标记，而不是 DOM 中的标记。因此对其进行渲染没有错误，但不可见。

您的视图是否有成功的初始渲染？如果是这样，您必须在此处的草图中未包含的某些代码中将它们附加到 DOM 元素。例如：

var tabAView = new TabAView({el: '#tabA'});

或者可能

tabAView.setElement('#tabA');

为视图创建的所有实例预设它的一种方法是：

var TabAView = Backbone.View.extend({
    el: '#tabA',
    // etc
});

无论是在创建时还是之后为视图提供元素，DOM 元素都应该首先存在。如果选择器为空，el 将再次默认为分离的 <div>.

---

重点是，当您在 TabAView 定义中创建对新 TabDView 实例的引用时，请确保将其引用设置为附加的 DOM重新渲染之前的元素。我会在您的 TabAView 中建议以下内容：

saveSuccessCallback: function ( model, response ) {
    tabDView.setElement('#tabD');
    tabDView.render()
},