使用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');
}

我-另一module.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元素在我们当前的模块/视图之外时，您是否使用其他方式来获取DOM属性？这种方式可以让数据对您有效吗？

Answer 1

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

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

Backbone.Wreqr

使用您在帖子中分享的观点，您首先要在 my-other-module.js 中设置请求响应处理程序。而是在控制器中触发事件，我们将在 my-other-module.js 视图中设置一个请求响应处理程序，我们将其称为 my-other-view.js

设置处理程序

首先，您必须启用请求消息传递系统，就像使用App.events一样。因此，在应用程序的某些集中部分（例如主控制器）中，您将执行：

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

MY-另一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并调用该请求。像这样：

MY-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）;

然后我们只需更改方法名称

MY-另一view.js

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

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

MY-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都使用频道。通过频道，您可以创建专用的消息总线，使您的消息分开。看看这里：Backbone.Radio Channels。