0

我正在使用 Backbone 将 Web 服务移植到单页 Web 应用程序中。有一个基本布局，由页眉组成，div#content我在其中附加视图和页脚的空白。

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

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

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

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

很明显，我的方法不够好，因为我应该有办法将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;
...
4

1 回答 1

1

我建议您应该在应用程序的某处存储对当前活动视图的引用。

您在这里创建一个新视图：

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

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

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

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

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

于 2013-02-25T08:33:17.980 回答