Backbone.js I'；我对这个小小的主干应用程序中的事件做了一些错误的处理_Backbone.js

Backbone.js I'；我对这个小小的主干应用程序中的事件做了一些错误的处理

backbone.js

Backbone.js I'；我对这个小小的主干应用程序中的事件做了一些错误的处理,backbone.js,Backbone.js,我试图了解事件在主干网中是如何工作的。在我看来，以下是一个非常简单的例子，那么我做错了什么呢 <!DOCTYPE html> <html> <head> <title>events</title> <meta charset="UTF-8"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.

我试图了解事件在主干网中是如何工作的。在我看来，以下是一个非常简单的例子，那么我做错了什么呢

<!DOCTYPE html>
<html>
<head>
  <title>events</title>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<script>
$(document).ready(function(){

  window.PasteView = Backbone.View.extend({
    el : '#paste',

    events : {
      'keyup' : 'callback',
    },

    initialize: function(){
      _.bindAll(this, 'render', 'callback');
    },

    render: function(){
    },
    callback : function(){
      $('body').append('<p>callback called</p>');
    }
  });

  window.paste = new PasteView;
})

</script>
</head>
<body>
<div id="paste">
  <p>Every time you hit a key there should be a console.log event</p>
  <textarea id="text" ></textarea>
</div>

</body>

</html>


事件
$（文档）.ready（函数（）{
window.PasteView=Backbone.View.extend({
el:'粘贴'，
活动：{
“keyup”：“callback”，
},
初始化：函数（）{
_.bindAll（这是“呈现”、“回调”）；
},
render:function（）{
},
回调：函数（）{
$（'body'）.append（'p>回调调用'）；
}
});
window.paste=新建粘贴视图；
})
每次按一个键时，都应该有一个console.log事件

keyup

事件不应该触发

callback

函数吗

您的html中似乎没有

body

标记。因此，

$（'body'）.append（…）

将不起作用。

在本例中，有一些内容缺失和/或不正确

主干视图的声明性事件要求直接指定有效的“el”（正如您尝试的那样）或由主干视图本身生成。当事件被绑定时，所有事件都在“el”的上下文中确定范围

如果您指定一个el，就像您在这里所做的那样，那么您指定的元素在解析代码时必须存在于页面的html中。如果您不指定el，则主干将为您生成一个el

这里有几个例子：

样本#1

允许生成el并单击其中的按钮：

MyView = Backbone.View.extend({
  events: {
    "click #thatThing": "youClickedIt"
  },

  youClickedIt: function(){
    alert("you clicked it!");
  },

  render: function(){
    $(this.el).html("Click me");
    return this;
  }
});

$(function(){
  var el = new MyView().render().el;
  $("body").append(el);
});

下面是HTML：

<html>
  <script src="...thisExample.js"></script>
  <script src="...jQuery.js"></script>
  <body>
  </body>
</html>

<html>
  <script src="...thisExample.js"></script>
  <script src="...jQuery.js"></script>
  <body>
    <div id="something">
      <button id='thatThing'>Click me</button>
    </div>
  </body>
</html>

下面是HTML：

<html>
  <script src="...thisExample.js"></script>
  <script src="...jQuery.js"></script>
  <body>
  </body>
</html>

<html>
  <script src="...thisExample.js"></script>
  <script src="...jQuery.js"></script>
  <body>
    <div id="something">
      <button id='thatThing'>Click me</button>
    </div>
  </body>
</html>


点击我

在本例中，没有“render”方法，因为html已经存在。相反，我们只是将视图附加到现有的“#something”div。然后，声明的事件的作用域是el，它将找到“thatThing”按钮。因此，当你点击它时，你会看到警报框

请注意，如果按钮不存在于“某物”el中，单击该按钮不会导致警报框显示。您声明的事件始终限定在视图的el范围内

希望有帮助。

首先，不应该

粘贴视图

扩展

主干。视图

而不是

主干。模型

？

谢谢。不过，活动似乎还没有启动。非常感谢德里克的精彩评论。一个观察：我无法使用“var-el=new-MyView.render（）.el；”这行代码——我必须使用两行代码：“var-view=new-MyView；var-el=view.render（）.el；”知道这是怎么回事吗？在晚上回答问题太晚导致语法错误：）“var-view=new-MyView（）.render（）.el”应该这样做。。。不管怎样，很高兴你成功了