Question

以下视图绑定到 cars 元素。

初始化视图时，我会加载某个模板，该模板会加载一个名为“。menu”的div 。

现在，我想对该菜单执行操作，使用hmtl填充它，并且我只希望视图内的菜单受到影响。

如果该页面上有另一个“菜单”，则在视图外部会受到影响。

我应该如何确保视图中的JavaScript仅影响该视图中的元素？

var myView = Backbone.View.extend({

    el : '.cars',

    pag : '.pagination',

    initialize : function () {

        var template = _.template(myTemplate, {});

        $(this.el).html(template);

        $('.menu').html('test');
    },

    events : {
    'click .pagination a' : 'click'
},

});

我可以这样做：

$('.cars .menu').html('test');

但我认为应该有一个更优雅的解决方案，比如将.menu绑定到视图。

第二个问题......

如果我将click事件绑定到视图中名为.pagination的div ...如何在events对象中使用变量而不是编写元素的名称？

Answer 1

视图el中的html可以使用find确定范围：

yourView.$el.find(".menu");

或通过上述方法的快捷方式：

yourView.$(".menu");

考虑到您的第二个问题，您还可以使用事件绑定到视图中的元素：

 // in the model definition
 events: {
   // This would only bind to clicks for .pagination elements that are
   // children of the view
   'click .pagination a' : function (e) {
      // You can get at the clicked element via the `currentTarget` property 
      // of the event
      var href = $(e.currentTarget).attr('href');
      console.log(href);
   }
 }

Backbone，如何确保在视图中声明的函数只影响该视图中的DOM元素？

1 个答案: