CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.jsjst
ac360
ac360

Reputation: 7835

How To Use Multiple JST Templates In A Single Backbone View

Why is this code resulting in the following error in the render function?

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

});

Upvotes: 0

Views: 1339

Answers (1)

s_curry_s
s_curry_s

Reputation: 3432

you can try doing something like 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'] };
    }

});

But instead of doing this I would create different views for these google auth cases and display the views rather than changing the template in one view

Upvotes: 1

Related Questions