无法让backbone.js 正常工作答案

【问题标题】：can't get backbone.js to work correctly无法让backbone.js 正常工作
【发布时间】：2011-09-20 15:36:49
【问题描述】：

HTML：

<!DOCTYPE html>
<html>
<head>


    <script src='../client_side_javascript/jquery.min.js' type='text/javascript'></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

    <script src='../client_side_javascript/bbmain.js' type='text/javascript'></script>
</head>
<body>
    <div class='container'>
      <header>
          <div class='logo'><h1>logo</h1></div>
      </header>
      <section class='search'>
          <div>
            <form class='main_search_form'>
                <input class='main_search_bar' type='text' placeholder='Type claim here'>
                <div class='main_submit'>
                    <input class='main_submit_button' type='submit' value='Prove'>
                </div>
            </form>
          </div>
      </section>
      <section class='arguments'>
      </section>
      <footer>
      </footer>
    </div>
</body>
</html>

JAVASCRIPT：

(function ($) {
console.log("backbone");
AppView = Backbone.View.extend({
    el: $('body'),
    events: {
        "click input.main_submit_button":  "addClaim",
    },
    addClaim: function (event) {
        console.log("main submit button pressed");
        event.preventDefault();
        var claim = $('input.main_search_bar').val();
        console.log('claim: ' + claim);
        if ( claim != ""){
            $('section.arguments').append('<div class="claim">- ' + claim + ' <input type="button" class="because_button" value="because"></div>');
        }
    }
});
App = new AppView;
})(jQuery);

我刚开始玩这个，不知道我错过了什么......

该事件似乎从未被调用。

感谢您的宝贵时间。

【问题讨论】：

顺便说一句，你错过了主干点。你应该使用模型。我会从Claim 模型开始。
我才刚刚开始......我想先让这个简单的视图工作。
我的第一条评论包含您的代码的工作版本。
你能详细说明为什么它以前不起作用吗？没有模板？
不知道，它对我有用。我只是添加了模板来清理它。因此，评论而不是答案。

标签： javascript events backbone.js

【解决方案1】：

此代码存在多种问题。

1：`events`的范围

events: { ... } 配置使用您指定的el 来绑定事件。所以，如果你的 html 看起来像这样：

<div id="foo">
  <button id="bar">click me!</button>
</div>

你有一个这样的视图设置：


MyView = Backbone.View.extend({
  el: "#foo",

  events: {
    "click #bar": "buttonClicked"
  }
});

这会将#bar 的点击事件限定为#foo 的el。就好像你直接用 jquery 做的一样：

var el = $("#foo");
var button = $("#bar", el);
button.click(function(e){ ... });

请注意，在此示例中选择 #bar 时，我将其范围限定为 el 变量。 Backbone 做了类似的事情，将视图的 events 范围限定为 el。

2：在加载 DOM 之前执行 jquery 选择器

您也可能遇到 DOM 未加载且不可用的问题。如果您的视图是在 DOM 完成加载之前定义的，则对 el: $("body") 的 jQuery 调用将无法找到任何内容。

要解决这个问题，您可以将 jquery 调用放在视图初始化程序中：


initialize: function(){
  this.el = $("body");
  // ... other stuff here
}

还有其他方法可以解决这个问题。由于您已经在使用一个模块，因此将该模块分配给一个命名变量，然后在 jquery 方法中初始化该模块，而不是立即：


MyApp = (function ($) {
console.log("backbone");
AppView = Backbone.View.extend({
    el: $('body'),
    events: {
        "click input.main_submit_button":  "addClaim",
    },
    addClaim: function (event) {
        console.log("main submit button pressed");
        event.preventDefault();
        var claim = $('input.main_search_bar').val();
        console.log('claim: ' + claim);
        if ( claim != ""){
            $('section.arguments').append('- ' + claim + ' ');
        }
    }
});
App = new AppView;
});


$(function(){
  MyApp(jQuery);
})

希望对您有所帮助。

【讨论】：

我不确定我是否理解范围界定问题是什么。我的代码中的 'el' 是 'body'，如果点击事件的范围是那里，为什么会出现问题？

1：events的范围

2：在加载 DOM 之前执行 jquery 选择器

1：`events`的范围