如何使用Backbone将在实例化视图中创建的数据传递给视图模板？

Question

我已经实例化了一个视图并创建了一个我想在视图模板中使用的数据对象，但是我不确定我如何获取新传递的数据以便将其传递到模板中，我有一种感觉这是完全错误的

WelcomeView.js

this.heroVideoView = new HeroVideoView({
                el: this.$el.find('.js-video-hero'),
                data: {
                    heading: 'This is my heading',
                    videoId: '5ZD4a3qDNlk'
                }
            });
            this.heroVideoView.render();

HeroVideoView.js

render: function() {

            // Render template contents right in to the main container
            this.$el.html( this.template({
                data: this.data
            }) );

            return this;

        },

模板

<a href="/" class="hero-content js-view-video transition-toggle" data-video="{{{data.videoId}}}">
    <div class="wrap">
        <div class="heading-info">
            <h2>{{{data.heading}}}</h2>
            <button class="btn btn-icon heading-button">
                <svg viewBox="8 5.1 11 14" class="icon icon-play">
                    <use xlink:href="#icon-play"></use>
                </svg>
            </button>
        </div>
    </div>
</a>

Answer 1

创建视图时，选项哈希中传递的所有内容并非都直接附加到视图本身。 如果您传入的属性是“模型”而不是“数据”，那么您会怀疑事情会发生，因为Backbone会自动将此属性附加到视图。

在Backbone 1.1.0之前，您可以访问传递给视图构造函数的其他属性（例如，称为“ data”的属性），例如this.options.data。 但是，从Backbone 1.1.0开始，您将必须在initialize方法中捕获此类属性：

initialize: function (options) {
    this.data = options.data;
}

...

render: function() {
    this.$el.html(this.template({
        data: this.data
    }));
    return this;
}