【问题标题】:access function in one view from another in backbone.js在backbone.js 中从另一个视图访问函数
【发布时间】:2011-10-10 03:12:12
【问题描述】:

我有这样的视图结构:

window.templateLoaderView = Backbone.View.extend({});

window.PopupView = templateLoaderView.extend({
   initialize: function () {
       this.PopupModel = new PopupModel();
       this.event_aggregator.bind("tasks_popup:show", this.loadTaskPopup);
   },

   render: function() {
       template= _.template($('#'+this.PopupModel.templateName).html());
       $(this.el).html(template(this.PopupModel.toJSON()));
       $('#'+this.PopupModel.containerID).html(this.el);
   },

   loadTaskPopup: function() {
       this.PopupModel.loadTemplate("popupTask_templateHolder", "/js/templates/popup_task.html", "1", "container_dialog");
       this.render();
   }
});

window.TaskbarView = templateLoaderView.extend({

   initialize: function () {
       this.TaskbarModel = new TaskbarModel();
       this.PopupModel = new PopupModel();
   },

   loadTaskbarPopup: function() {
       this.event_aggregator.trigger("tasks_popup:show");
   }

});

所以我想在一个视图中从另一个视图中运行函数。据我了解,我需要以某种方式绑定它们。是否可以在初始化函数中绑定它们?

我在这里看到了例子:Backbone.js - Binding from one view to another?。他们创建了两个对象,而不是以某种方式绑定它们。

提前致谢,

【问题讨论】:

    标签: backbone.js


    【解决方案1】:

    我有点喜欢使用“事件聚合器”模式。我确保每个视图都获得了同一个事件聚合器对象的副本,并且它们都可以通过它相互交谈……有点像 CB 收音机 :)

    在创建任何视图之前执行此操作:

    Backbone.View.prototype.event_aggregator = _.extend({}, Backbone.Events);
    

    现在,您可以在任何地方发布/订阅:

    window.PopupView = Backbone.View.extend({
        initialize: function() {
            _.bindAll(this, "loadTaskPopup");
            this.model = new PopupModel();
            this.event_aggregator.bind("tasks_popup:show", this.loadTaskPopup);
        },
    
        loadTaskPopup: function() {
            // do something with this.model
        }
    });
    
    window.TaskbarView = Backbone.View.extend({
        loadTaskbarPopup: function() {
          this.event_aggregator.trigger("tasks_popup:show")
        }
    });
    

    【讨论】:

    • 谢谢你,Brian,我试着按照你给我看的方式去做,但我想是因为我的模型和视图的结构,它没有用。当我从 TaskbarView 访问此函数时,Firebug 向我抛出此错误 this.PopupModel is undefined。你知道我该如何解决吗?
    • 是的。你的新问题是无关的。您尚未将 loadTaskPopup 函数绑定到对象的上下文中。查看我添加到PopupView.initialize_.bindAll 调用。它将导致使用对象的上下文 (this) 调用 loadTaskPopup,以便函数可以解析 this.PopupModel
    • 我还要补充一点,从惯用的角度来看,您不应该创建一个名为PopupModel 的属性,而应该是model。你的模型正在加载一个模板也很奇怪......但我会让你自己弄清楚那个。 :)
    • 谢谢布赖恩,它成功了:)只有两个问题。如果 1 个视图有 2 个模型怎么办?你会怎么命名它?模型加载模板的原因是,有一些函数从 localStorage 加载模板(如果不存在,则从 .html 文件获取模板并将其保存到 localStorage)。更多信息在这里:stackoverflow.com/questions/7542089/…。你觉得这不合逻辑吗?感谢您的所有帮助:)
    • 使用模型从本地存储加载数据当然是合乎逻辑的。即使该数据恰好是一个模板。我不会太担心它。至于有两个模型,这通常表明您的视图做得太多。通常有一个您的视图正在作用的主要模型。如果有其他型号,通常是为了支持。我仍然会尝试保留一个model 并将任何东西作为一个特殊的名称。您的代码中可能就是这种情况...我只是注意到一个常见问题...但这并不意味着您一定做错了。这有帮助吗?
    猜你喜欢
    • 2014-08-12
    • 2011-10-19
    • 1970-01-01
    • 2013-10-24
    • 1970-01-01
    • 2021-09-24
    • 2011-03-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多