Javascript can'；无法使backbone.js正常工作_Javascript_Events_Backbone.js

Javascript can'；无法使backbone.js正常工作

javascript events backbone.js

Javascript can'；无法使backbone.js正常工作,javascript,events,backbone.js,Javascript,Events,Backbone.js,HTML: 标志 JAVASCRIPT: <!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/un

HTML:


标志

JAVASCRIPT:

<!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>

（函数（$）{
控制台日志（“主干”）；
AppView=Backbone.View.extend({
el:$（“正文”），
活动：{
“单击输入。主提交按钮”：“添加索赔”，
},
addClaim:函数（事件）{
console.log（“按下主提交按钮”）；
event.preventDefault（）；
var claim=$（'input.main_search_bar'）.val（）；
console.log（'claim:'+claim）；
如果（索赔！=“”）{
$（'section.arguments'）.append（'-'+claim+''）；
}
}
});
App=新AppView；
})（jQuery）；

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

这件事似乎从未被提起过

感谢您抽出时间。

此代码存在多个问题

事件的范围

events:{…}

配置使用您指定的绑定事件的

el

。因此，如果您的html如下所示：

(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);

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

这将把

#bar

的点击事件范围扩大到

#foo

的el。就好像是直接用jquery做的：


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

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

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

事件范围限定到el

2：在加载DOM之前执行jquery选择器
您还可能遇到DOM未加载且不可用的问题。如果在DOM完成加载之前定义了视图，那么对el:$（“body”）
的jQuery调用将无法找到任何内容
要解决此问题，可以将jquery调用放在视图初始值设定项中：
var el = $("#foo");
var button = $("#bar", el);
button.click(function(e){ ... });

围绕这一点，还有其他方法。由于您已经在使用一个模块，请将该模块分配给一个命名变量，然后在jquery方法中初始化该模块，而不是立即：

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

希望这能有所帮助。
顺便说一句，你没有抓住重点。你应该使用模型。我从一个索赔模型开始。我刚开始。。。我想先让这个简单的视图工作。我的第一条评论包含代码的工作版本。你能详细说明一下为什么以前它不工作吗？没有模板？不知道，它马上就对我起作用了。我只是添加了模板来清理一下。我不确定我是否理解范围界定的问题是什么。我的代码中的“el”是“body”，如果click事件的作用域在那里，为什么会出现问题？

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);
})