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

创建视图时，并非所有在选项哈希中传递的内容都直接附加到视图本身。如果您传入名为＆＃34; model＆＃34;因为Backbone会自动将此属性附加到视图中，而不是＆＃34;数据＆＃34;，事情将按您的意愿运行。

在Backbone 1.1.0之前，您可以访问传递给视图构造函数的其他属性（例如您的名为＆＃34; data＆＃34;），例如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;
}

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

1 个答案: