在DOM中已经在主干中附加事件处理程序

时间:2014-01-24 00:10:17

标签: jquery backbone.js

我理解将事件处理程序附加到这样的视图:

events:{
  'a click':'mymethod'
}

但是,如果我想将点击事件附加到DOM中已有的内容,该怎么办?我没有视图,模型或任何东西的东西。

UDATED CODE

app.js:

(function() {

window.Team = {
Models: {},
Collections: {},
Views: {},
Router: {}
};

$(document).ready(function() {

var employees = new Team.Collections.Members();
employees.fetch({

data: { action: 'get_gdw_employees' },

success: function(collection, object, jqXHR){
  var allMembers = new Team.Views.AllMembers({collection: employees });
},

error: function(jqXHR, statusText, error) {
  console.log(error);
}
});

 var foo = new Team.Router.UIEvents();
 Backbone.history.start({pushState: true, root:"/about-us/meet-the-team/"});

 });

 })();

app.model.js

Team.Models.Member = Backbone.Model.extend({});

app.collections.js

Team.Collections.Members = Backbone.Collection.extend({
 model: Team.Models.Member,
 url: 'wp-admin/admin-ajax.php'
});

app.views.js

Team.Views.Member = Backbone.View.extend({

initialize:function(){
  this.render();
},

render:function(){
  this.$el.html( this.model.get('firstName'));
  return this;
}

});

Team.Views.AllMembers = Backbone.View.extend({

 initialize:function(){
   this.render();
 },

render:function(){
  this.collection.each(function(member){
    var employee = new Team.Views.Member({model:member});
  }, this);

 return this;
}

});

2 个答案:

答案 0 :(得分:0)

你可以这样做:

$('thatThingSelector').bind('click', function(){...});

<强> EDITED

从架构的角度来看,在基于Backbone的应用程序(SPA)中,每个交互都必须使用Backbone来实现,否则它将是一种新的意大利面:)。

如果您说您的页面中有一部分用户可以与之交互,那么听起来它应该包含在View中,因为View不一定需要它可能的模型,就像您的情况一样,应用程序的一些交互部分。

答案 1 :(得分:0)

如果你想使用骨干来处理DOM事件,你需要将DOM的那部分附加到骨干视图。

将骨干视图附加到DOM的现有部分实际上非常容易。

标记

<div id="existing-element">
    <button id="my-button"/>
</div>

视图

var myView = Backbone.View.extend({

      el: '#existing-element',

      events:{
       'click #my-button' : 'onClick'
      },

      onClick: function(){
        //handle click event
      }
});