在 Backbone.View 的 delegateEvents 中寻找渲染事件答案

【问题标题】：Looking for render event in delegateEvents in Backbone.View在 Backbone.View 的 delegateEvents 中寻找渲染事件
【发布时间】：2015-11-12 16:24:24
【问题描述】：

我有一个关于Backbone.View 及其delegateEvents 的问题。您可以在文档here 中阅读有关extend 方法的信息。使用此方法，您可以“覆盖渲染函数，指定您的声明性事件”等。

我对声明性事件或delegateEvents有疑问（不知道该如何称呼它）。它们被描述为here。这是一个例子：

  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

}

我该怎么做？因为delegateEvents中的render不起作用：/

【问题讨论】：

标签： javascript jquery backbone.js marionette backbone-views

【解决方案1】：

也许在您的视图中的初始化函数中，您可以有一个带有渲染的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);

【讨论】：

【解决方案2】：

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 trigger触发

   this.$(".myselector").trigger("render");

或在你的视野之外

  view.$(".myselector").trigger("render");

【讨论】：