Question

我正在使用Backbone将Web服务移植到单页webapp中。有一个基本的布局，包括一个标题，一个空的div#content，我附加了视图和一个页脚。

每条路线都会创建相应的视图，并将其附加到div#content，以替换之前使用新视图渲染的视图。

我正在使用require.js加载骨干应用及其依赖项。所有Backbone代码都很小，只有一个文件，因为我只使用路由器和视图。此AMD模块依赖于util.js文件导出视图中使用的函数。创建并呈现视图后，它会从util.js执行所需的实用程序（jquery stuff，ajax等）。

问题在于，当我渲染视图时，会调用它的实用程序，当我导航到另一个路径并创建新视图时，现在会调用新视图的实用程序，但旧视图的实用程序仍在运行。

在某些时候，我有五个视图中的实用程序一起运行，有时会导致冲突。

很明显，我的方法还不够好，因为我应该有stop/start实用程序作为某种服务的方式。

我会粘贴显示我当前方法的相关代码：

require(["utilities"], function(util) {
...
Application.view.template = Backbone.View.extend({
  el: "div#content",
  initialize: function(){
    this.render();
  }, 
  render: function(){
    var that = this;
    // ajax request to html
    getTemplate(this.options.template, {
      success: function(template) {
        var parsedTemplate = _.template( template, that.options.templateOptions || {});
        that.$el.html(parsedTemplate);
        // execute corresponding utilities
        if(that.options.onReady) {
          that.options.onReady();
        }
      },
      error: function(template) {
        that.$el.html(template);
      }
    })
  }
});
...
Application.router.on('route:requestPayment', function(actions) {  
  var params = { template: 'request-payment', onReady: util.requestPayment };
  var view = new Application.view.template(params);
});       
...

});

util.requestPayment包含一个函数，其中包含模板工作所需的所有内容。

我对如何处理这个问题很困惑。我希望我很清楚，任何建议或帮助都将受到赞赏。

编辑： utilities.js摘录：

...

var textareaCounter = function() {
  $('#requestMessage').bind('input propertychange', function() {
    var textarea_length = 40 - $(this).val().length;
    if(textarea_length === 40 || textarea_length < 0) {
      $('#message-counter').addClass('error').removeClass('valid');
      $("#submitForm").attr('disabled', 'disabled');
    }
    else if(textarea_length < 40 && textarea_length > 0) {
      $('#message-counter').removeClass('error');
      $("#submitForm").removeAttr('disabled');
    }
    $('#message-counter').text(textarea_length);
  });
}
...    
var utilities = utilities || {};
...
utilities.requestPayment = function() {      
  textareaCounter();
  initForm();
  preventCatching();
  requestPaymentCalcFallback();
};
...
return utilities;
...

Answer 1

我建议您应该在应用中的某个位置存储对当前活动视图的引用。

您可以在此处创建新视图：

var view = new Application.view.template(params);

但之后您无权访问此变量。所以它存在，但你不能停止/删除/摆脱它。

我们通常做的是拥有一个Parent App类，它初始化整个应用程序并管理所有内容。您在requirejs中的每个模块都将依赖于它。当新路线导航时，您要求Parent App类更改视图。它将删除旧视图，创建一个新视图，填充div＃content，然后存储它的引用。

我认为当您删除旧视图时，所有实用程序都将停止响应它。

如果您仍然遇到调用事件的问题，那么在删除视图参考之前，您可能需要使用stopListening事件绑定器。

来自多个视图实例的代码导致冲突

1 个答案: