使用Marionette视图中Handlebars模板中定义的DOM元素

Question

我正在使用带有Handlebars模板的Marionette视图。

以下是我的示例视图：

(function() {

  'use strict';

  var root = this;

  root.define([...],

  function( Backbone, Tmpl ) {

      return Backbone.Marionette.ItemView.extend({

          initialize: function() {},

          template: { 
              type: 'handlebars',
              template: Tmpl
            },

            ui: {},

          events: {},

          onRender: function() {
              var canvas = document.getElementById('stage');
          }
      });

      });

}).call( this );

在模板Tmpl中，我创建了<canvas id="stage"></canvas>。

在加载此模板后，我想在画布上绘制一些漂亮的东西，但这是令人伤心的事情 - canvas尚未准备好！我想肯定应该有一些包装事件，在加载模板后调用。我应该如何重写我的代码？

Answer 1

您需要使用onShow。

渲染triggerMethod流程：

1. onBeforeRender - 在呈现视图之前
2. onRender - 调用.render之后，但在将其添加到DOM之前
3. onShow - 将视图添加到DOM
之后