[英]Looking for render event in delegateEvents in Backbone.View
我對Backbone.View
及其delegateEvents
有一個疑問。 您可以在此處閱讀有關extend
方法的文檔。 使用此方法,您可以“重寫渲染功能,指定聲明性事件”等。
我有一個關於聲明性事件或委托 事件的問題(不確定如何調用它)。 它們在這里描述。 這是一個示例:
var DocumentView = Backbone.View.extend({
events: {
"dblclick" : "open",
"click .icon.doc" : "select",
"contextmenu .icon.doc" : "showMenu",
"click .show_notes" : "toggleNotes",
"click .title .lock" : "editAccessLevel",
"mouseover .title .date" : "showTooltip"
},
open: function() {
window.open(this.model.get("viewer_url"));
},
select: function() {
this.model.set({selected: true});
},
...
});
如您所見,您可以在模板DOM中的特定對象上添加不同的事件。 如click
或mouseover
。 因此,擁有此模板:
<foo></foo>
{#myplayers}
<player class="normal" value="{player}" style="{style}"></player>
{/myplayers}
您可以在每個播放器上添加不同的click
事件,如下所示:
events: {
'click player': 'playerClick'
},
playerClick: function( e ) {
var playerValue = e.currentTarget.getAttribute( 'value' );
// HERE: e.currentTarget I've particular player
}
我的問題:我可以像單擊事件一樣聲明渲染事件嗎? 我想在呈現單個玩家(而不是整個列表)時捕獲事件。 我需要在那里獲取e.currentTarget
並稍微更改其CSS。
我正在尋找這樣的東西:
events: {
'render player': 'playerRendered'
},
playerRendered: function( e ) {
var playerValue = e.currentTarget.getAttribute( 'value' );
// HERE: e.currentTarget I've particular player
}
我怎樣才能做到這一點? 因為在委托事件中render
,所以不起作用:/
也許在視圖內的initialize函數中,您可以在渲染中包含一個listenTo。 像這樣:
var view = Backbone.View.extend({
className: 'list-container',
template: _.template($('#my-template').html()),
initialize: function () {
this.listenTo(this, 'render', function () {
console.info('actions');
});
},
render: function() {
this.$el.html(this.template(this));
return this;
},
});
接着:
var myView = new view();
myView.render();
myView.trigger('render');
$('#container').html(myView.el);
var View = Backbone.View.extend({
events: {
'render .myselector': 'playerRendered'
},
playerRendered: function( e ) {
console.log("arguments");
var playerValue = e.currentTarget.getAttribute( 'value' );
// HERE: e.currentTarget I've particular player
},
render:function(){
console.log("render");
this.$el.html("<div class='myselector'></div>");
}
});
var view = new View();
view.render();
你可以用jQuery觸發器觸發
this.$(".myselector").trigger("render");
或在您的視野之外
view.$(".myselector").trigger("render");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.