javascript - 使用 MarionetteJS 处理来自其他模块的 DOM 属性的最佳方法是什么？

Question

现在我经常使用 Backbone.Marionette，我担心处理 DOM 外部属性的最佳方式是什么。

有时我需要做这样的事情:

我的view.js

var MyView = ItemView.extend(
//...
//insert a lot of code here
//...
myFunction: function() {
    var someKindOfCalculation = this.$('.my-field').height() + Backbone.$('.my-external-module').height();
     //...
}

.my-external-module 是另一个 MarionetteJS 模块内部的 DOM 元素。我目前解决这个问题的方法是这样的:

我的view.js

//Some way to obtain the App.events variable(browserify, requireJS, global...)
//...
var MyView = ItemView.extend(
//...
//insert a lot of code here
//...
myFunction: function() {
    App.events.on('app:MyOtherModule:height:returned', function(heightForModule) {
        var someKindOfCalculation = this.$('.my-field').height() + heightForModule;
        //...
    });
    App.events.trigger('app:MyOtherModule:height');
}

我的其他模块.js

//Some way to obtain the App.events variable(browserify, requireJS, global...)
//...
var MyOtherModule = Controller.extend({
    //...
    //insert a lot of code here
    //...
    start: function() {
        App.Events.on('app:MyOtherModule:height', function() {
            App.Events.trigger('app:MyOtherModule:height:returned', this.view.$el.height());
        });
    }    
})

虽然它工作正常，但这种获取“外部”DOM 属性的方式对我来说太奇怪了，因为每次您想要获取外部属性时我们都会包含一个新的回调。当这些 DOM 元素在我们当前的模块/ View 之外时，您是否正在使用另一种方式来获取 DOM 属性？这种获取数据的方式是否对您有效？

Answer 1

目前，Marionette 附带 Backone.Wreqr，但对于消费者而言，Wreqr 和 Radio 之间的差异只是语义上的。我将向您展示如何设置和使用两者的请求响应处理程序。

使用请求响应处理程序，您不必确保已创建 my-view.js，因为 my-view.js 会主动请求数据，而不是等待 my-other-module.js 发布它。

Backbone .Wreqr

使用您在帖子中分享的 View ，您首先要在 my-other-module.js 中设置请求响应处理程序。我们将在 my-other-module.js View 中设置请求响应处理程序，而不是在 Controller 中触发事件，我们将其称为 my-other-view.js .

设置处理程序

首先您必须启用请求消息系统，就像您使用 App.events 一样。因此，在您应用程序的某个集中部分(例如主 Controller )，您将执行:

App.reqres = new Backbone.Wreqr.RequestResponse();    

我的其他view.js

var MyOtherView = ItemView.extend({
  initialize: function () {
    this.setupHandlers();
  },

  setupHandlers: function() {
    App.reqres.setHandler('app:MyOtherModule:height', function(){
      return this.view.$el.height();
    });
  }
});

请求数据

在 my-view.js 上，您只需传递 App 引用即可获取 App.reqres 并调用要求。像这样:

我的view.js

var MyView = ItemView.extend{(
  //...
  //insert a lot of code here
  //...
  myFunction: function() {
    var heightForModule= App.reqres.request('app:MyOtherModule:height');
    var someKindOfCalculation = this.$('.my-field').height() + heightForModule;                 
  }
});

就是这样!这当然可以节省大量代码。

Backbone . radio

Radio 是 Wreqr 的优化(和更小)版本，保留了其功能。要使用它我们简单地采用语言即API，但用法本质上是相同的。

首先，我们在应用程序的中心位置设置请求消息传递总线，

_.extend(App.reqres, Backbone.Radio.Requests);

然后我们简单地更改方法名称

我的其他view.js

var MyOtherView = ItemView.extend({
  initialize: function () {
    this.setupHandlers();
  },

  setupHandlers: function() {
    App.reqres.reply('app:MyOtherModule:height', function(){
      return this.view.$el.height();
    });
  }
});

我的view.js

var MyView = ItemView.extend{(
  //...
  //insert a lot of code here
  //...
  myFunction: function() {
    var heightForModule= App.reqres.request('app:MyOtherModule:height');
    var someKindOfCalculation = this.$('.my-field').height() + heightForModule;                 
  }
});

结语

Wreqr 和 Radio 都使用 channel 。通过 channel ，您可以创建专用的消息传递总线，将消息分开。看这里:Backbone.Radio Channels .