Question

我遇到了requirejs和backbone的问题。好吧，我有两个视图（View1和View2）。我想从View1调用View2.render（），从View2调用View1.render（）。一般来说，我希望每个视图都依赖于另一个视图。

我的问题是我无法调用View2.render（）。我收到错误消息“无法调用方法渲染未定义”

如果我从View2中删除 View1 依赖关系，那么它将起作用。

有谁知道如何修改代码以便它可以正常运行？

修改

查看名称 - ＆gt; View2

define([
'Underscore',
'Backbone',
'Handlebar',
'views/view1'
], function (_, Backbone, Handlebars, View1) {
var View2 = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, "render");
    },
    tagName: 'div',
    el: '#rightPanel',
    events: {
        'change input#createNewCategory': 'createNewItem',
        'click #saveEdits': 'saveData',
        'click #clearEdits': 'render'
    },
    render: function () {
        //do something here
    },
    clear: function () {
        this.$el.empty();
    },
    createNewItem: function (e) {
      //so something here
    },
    saveData: function () {
        //This works Fine
        View1.render();
    }
});

return new View2;
});

查看名称 - ＆gt;视图1

define([
'Underscore',
'Backbone',
'Handlebar',
'views/view2'
], function (_, Backbone, Handlebars, View2) {
var View1 = Backbone.View.extend({
    tagName: 'li',
    el: '#categoriesList',
    events: {
        'click .categoryItem': 'edit'
    },
    initialize: function () {
        _.bindAll(this, "render");
    },
    edit: function (e) {
        View2.render();
        //**ERROR (cannot call method render of undefined)**
    },
    render: function () {
        //do something here
    }
});

return new View1;
});

谢谢

Answer 1

首先添加EventBus模块。这基本上是Event Aggregator Pattern：

define([
    'Underscore',
    'Backbone'
], function(_, Backbone){
    var EventBus = {
    };
    _.extend(EventBus, Backbone.Events);
    return EventBus;
});

接下来，使用EventBus模块在模块之间发送消息。这也允许您在多个模块中订阅这些事件，并有助于保持单一责任原则。：

define([
'Underscore',
'Backbone',
'Handlebar',
'EventBus',
], function (_, Backbone, Handlebars, Vent) {
var View2 = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, "render");
        Vent.on("View1:edit", this.render, this);
    },
    tagName: 'div',
    el: '#rightPanel',
    events: {
        'change input#createNewCategory': 'createNewItem',
        'click #saveEdits': 'saveData',
        'click #clearEdits': 'render'
    },
    render: function () {
        //do something here
    },
    clear: function () {
        this.$el.empty();
    },
    createNewItem: function (e) {
      //so something here
    },
    saveData: function () {
        Vent.trigger("View2:save");
    }
});

return new View2;
});


define([
'Underscore',
'Backbone',
'Handlebar',
'EventBus'
], function (_, Backbone, Handlebars, Vent) {
var View1 = Backbone.View.extend({
    tagName: 'li',
    el: '#categoriesList',
    events: {
        'click .categoryItem': 'edit'
    },
    initialize: function () {
        _.bindAll(this, "render");
        Vent.on("View2:save", this.render, this);
    },
    edit: function (e) {
        Vent.trigger("View1:edit");
    },
    render: function () {
        //do something here
    }
});

return new View1;
});

Answer 2

循环依赖关系在require.js文档中有所介绍：http://requirejs.org/docs/api.html#circular

您需要在依赖项列表中包含require（作为Define函数的参数），然后使用require（）调用其他视图，例如：

define([
'require'
'Underscore',
'Backbone',
'Handlebar',
'views/view1'
], function (require, _, Backbone, Handlebars, View1) {
var View2 = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, "render");
    },
    tagName: 'div',
    el: '#rightPanel',
    events: {
        'change input#createNewCategory': 'createNewItem',
        'click #saveEdits': 'saveData',
        'click #clearEdits': 'render'
    },
    render: function () {
        //do something here
    },
    clear: function () {
        this.$el.empty();
    },
    createNewItem: function (e) {
      //so something here
    },
    saveData: function () {
        //This works Fine
        require("View1").render();
    }
});

return new View2;
});

RequireJs - Backbone.Views彼此依赖

2 个答案: