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

为什么此代码会导致渲染函数中出现以下错误

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;
    }

});

---

您可以尝试这样做：

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案例创建不同的视图并显示视图，而不是在一个视图中更改模板

this.template=this.template1而不是this.template=this.options.template1