javascript - 如何在单个主干视图中使用多个 JST 模板

Question

为什么这段代码会导致渲染函数出现以下错误？

Uncaught TypeError: Property 'template' of object [object Object] is not a function - Line 21


KAC.Views.ScreenImportGoogle = Backbone.View.extend({

    tagName: "div",
    id: "",
    className: "",
    template1: JST['screens/import/google/unauthenticated'],
    template2: JST['screens/import/google/authenticated'],
    template3: JST['screens/import/google/imported'],

    initialize: function() {
        if      (this.options.user.google_auth   == false) { this.template = this.options.template1  }
        else if (this.options.user.google_import == false) { this.template = this.options.template2  }
        else if (this.options.user.google_import == true ) { this.template = this.options.template3  };
        $('#screen-container').html(this.render().$el);
    },

    events: {
    },

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

});

Answer 1

你可以尝试做这样的事情：

KAC.Views.ScreenImportGoogle = Backbone.View.extend({

    tagName: "div",
    id: "",
    className: "",
    template: function(){
        if (this.options.user.google_auth   == false) {return JST['screens/import/google/unauthenticated']}
        else if (this.options.user.google_import == false) { return JST['screens/import/google/authenticated']}
        else if (this.options.user.google_import == true ) { return JST['screens/import/google/imported'] };
    }

});

但我不会这样做，而是为这些 google auth 案例创建不同的视图并显示视图，而不是在一个视图中更改模板