绑定到页面html而不是Backbone视图的主干和通用事件

Question

我正在评估将一些jQuery代码移动到Backbone并且总有一个noob问题。我有一大堆jQuery事件，只存在于标准的html上（与骨干视图无关）。处理这些问题的适当场所是什么？ jQuery中简单的东西：

<div class='my-thing'>click me</div>
<script>
  $(document).ready(function(){
     $('.my-thing').on('click',function(){
       alert('say hello');
     });
  });
</script>

在Backbone中，它似乎是这样的：

events: {
     "mouseenter .my-thing":"say_again"
 },
 say_again: function(){
   alert('i want to say something');
 },

但是我会把它放在哪里？或者构建这个？

事先提前

Answer 1

通常，您会按视图组织它们 - 这是您声明事件的位置。这需要模块化UI的布局，以便可以将每个事件限制在视图范围内。

<强>模板

<script type='text/template' id='say-template'>
    <div class='say-container'>
        <div class='my-thing'>click me</div>
    </div>
</script>

查看

var SayView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, "render");
        this.render();
    },

    el: "#container",

    template: _.template($("#say-template").html()),

    events: {
        "mouseenter .my-thing": "say_again"
    },

    say_again: function() {
        alert('i want to say...');
    },

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

var sayView = new SayView();

<强> HTML

<div id="container"></div>

Here's a working demo.

---

当然，如果需要，没有什么能阻止您在应用程序的全局范围内以正常方式连接事件。最好避免这样做，这往往会打破MVC模式。