1

因此，出于某种原因，导航在我的一种观点中不起作用。我现在正在一个文件中做所有事情，所以这可能是问题所在。我也知道代码很糟糕，我现在只是在搞乱主干。

编辑：我console.log()在 MarketingPage 的函数中放了一个route，它永远不会被调用，所以视图一定有问题。

此外，这是我从 chrome 开发工具中得到的错误：

Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.
    at P (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:16:142)
    at null.<anonymous> (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:18:417)
    at chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:1:182
    at miscellaneous_bindings:288:9
    at chrome.Event.dispatchToListener (event_bindings:390:21)
    at chrome.Event.dispatch_ (event_bindings:376:27)
    at chrome.Event.dispatch (event_bindings:396:17)
    at Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:254:22)

这是我的代码：

/*global public, $*/


window.public = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {

    },
    init: function () {
        console.log('Hello from Backbone!');
    }
};

var App = Backbone.Router.extend({
    routes: {
        '': 'index',
        'register': 'route_register',
    },

    index: function(){
        var marketing_page = new MarketingPage();
    },

    route_register: function(){
        var register_view = new RegisterView();
    }
});

window.app = new App();

var User = Backbone.Model.extend({
    url: '/user',
    defaults: {
        email: '',
        password: ''
    }
});

var MarketingPage = Backbone.View.extend({
    initialize: function(){
    this.render();
  },
  render: function(){
    var template = _.template($("#marketing-page").html());
        $('.search-box').after(template);
  },
  events: {
    'dblclick': 'route'
  },
  route: function(e){
      e.preventDefault();
      console.log("In route");
      window.app.navigate('register', {trigger: true});
      this.remove();
  }
});

var RegisterView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    render: function(){
        var template = _.template($("#register-template").html());
        $('.search-box').after(template);
    }
});

$(document).ready(function () {
    Backbone.history.start();
});

当我host/#register直接在浏览器中输入时，注册视图会被渲染，但无论我做什么，点击事件似乎都不起作用......

4

1 回答 1

0

由于route未调用处理程序函数，因此事件委托可能不起作用。

需要注意的一点是，在主干视图中设置的事件处理仅限于该视图的el. 我没有看到你的明确设置，所以它可能是创建一个空 div，然后处理该空 div 内的事件（你不想要）。

我用于快速原型的一个技巧是使用eljQuery 选择器设置视图，指向页面上已经存在的东西，然后render在.show().

由于您并没有真正这样做，因此您可以尝试一件事。我们正在做的是设置$el内容，然后调用delegateEvents以确保事件和处理程序被绑定。

var MarketingPage = Backbone.View.extend({
  initialize: function(){
    this.render();
  },
  render: function(){
    this.$el.html(_.template($("#marketing-page").html()));
    $('.search-box').after(this.$el);
    this.delegateEvents();
  },
  events: {
    'dblclick': 'route'
  },
  route: function(e){
      e.preventDefault();
      console.log("In route");
      window.app.navigate('register', {trigger: true});
      this.remove();
  }
});

Backbone.js 视图 delegateEvents 未绑定（有时）

http://backbonejs.org/#View-delegateEvents

于 2013-05-15T02:41:37.623 回答