Question

我曾在这里问过a question，提到我使用骨干事件。它工作得很好，除了我的事件监听器onFormSubmit()被调用两次。通常我不会关心，但是我有一个切换某些状态的功能，并且两次切换会产生问题。我认为我的视图被渲染了两次（根据SO上的其他答案），但它没有出现是这样的。我想了解“为什么＆＃39;这里发生了什么......这是一些代码（删除了不相关的东西）..

这是我的文章表单视图，调用触发表单上的事件保存，它被触发一次（正确的预期行为），并被重定向回仪表板..

var PostView = Backbone.View.extend({
  el: '#content',

  articletemplate: _.template($('#article-template-add').html()),

  initialize: function() {
    this.render();
  },

  render: function() {
    this.$el.html(this.articletemplate({}));
  },

  events: {
    "click .save": "savePost",
  },

  savePost: function() {
    var mypost = new PostModel();
    this.model = mypost;
    this.model.save(null, {
      success: function(model) {
        eventBus.trigger('formSubmitted', {
          message: "form submitted"
        });
        app.navigate("/", false);
      },
    });
  },
});

这是我在上面的表单提交后调用的Dashboard视图（）。这是onFormSubmit（）执行两次的地方（console.log（）被打印两次）。

var DashboardView = Backbone.View.extend({
  el: '#content',
  dashboardtemplate: _.template($('#dashboard-template').html()),

  initialize: function() {
    this.listenToOnce(eventBus, 'formSubmitted', this.onFormSubmit);
    this.render();
  },

  onFormSubmit: function(datahere) {
    console.log("onFormSubmit called"); // *** This gets printed twice
  },

  render: function() {
    $(this.el).empty().html(this.dashboardtemplate(this.model.attributes));
  },
});

现在，我开始认为主应用程序路由中可能存在一些问题？

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "dashboard",
    "article/add": "addarticle",
  },

  dashboard: function() {
    mydashview = new DashboardView();   
  },

  addarticle: function() {
    var articleView = new PostView();
  },
});

var eventBus = _.extend({}, Backbone.Events);
var app = new AppRouter();
Backbone.history.start();

修改

我更新了savePost（）以包含在this.model.save（）的回调中调用触发器。我强制它创建一个虚拟模型而不是从表单中获取它。好消息是我能够在此处重新创建行为：http://jsfiddle.net/okswxngv/如果您打开控制台，则可以看到onFormSubmit called两次打印。

Answer 1

您的问题与ghost view相关联。有人称之为僵尸。每次进入根页面时都会创建DashboardView，但从未删除。

即使您将新视图链接到#content div，这也是他存在的原因。

你可以在DashboardView上设置一个断点 - ＆gt;初始化并看到它被调用两次。

为了更好地理解我已经更改了代码并在视图中添加了一个名称（创建它的日期）并打印了这个名称。

要了解问题，您必须在创建新版本时删除不需要的view。

listenOnce（）在backbone.js事件中运行两次

1 个答案: