2

我对 requirejs 和骨干有疑问。好吧，我有两个视图（View1 和 View2）。我想从 View1 调用 View2.render()，从 View2 调用 View1.render()。一般来说，我希望每个视图都依赖于另一个视图。

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

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

有谁知道我该如何修改代码以便它可以正常工作？

编辑

视图名称-->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;
});

视图名称 --> View1

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;
});

谢谢

4

2 回答 2

4

首先添加 EventBus 模块。这基本上是事件聚合器模式：

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;
});
于 2012-10-11T18:26:47.887 回答
0

此处的 require.js 文档涵盖了循环依赖项：http ://requirejs.org/docs/api.html#circular

您需要在依赖项列表中包含 require （作为定义函数的参数），然后使用 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;
});
于 2012-10-10T16:17:30.077 回答