javascript - 从 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 之后