Difference between render and view keyword in emberjs?

Question

When would you use {{render "viewGoesHere" content}} vs {{view App.viewGoesHereView contentBinding="this"}}?

I'm trying to dynamically change the template to be rendered when different links in a side-bar menu are clicked. But the above two methods change to the correct template only when a link(from side-bar) is clicked the first time. Any links clicked after that produced the same template as the one generated the first time.

tl;dr: my templates are not dynamically changing when different link in the side-bar are clicked.

Here is my view:

App.ViewGoesHereView = Ember.View.extend({
    templateName: function(){
        var templateName = 'baseTemplate';

        var value = this.get('controller.model.Name');

        if (Ember.compare(value, 'abc') === 0) {
            templateName = 'abcTemplate';
            return templateName;
        }

        else if (Ember.compare(value, 'xyz') === 0) {
            templateName = 'xyzTemplate';
            return templateName;
        }

        return templateName;

    }.property('controller.model.Name'),

});

I'm basically getting the correct template based off the Name in the current model, and I can get the correct name in the templateName variable, but it doesn't render.

Answer 1

In your code sample you are trying to connect templateName property to controller.model.Name this approach works for the first time as you also said but templateName property is used by the ember view for first time only. i.e. if templateName changes after the view is rendered it does not re-render the view. And if you want your approach to work you will need to re-render the view each time your dependent properties changes.

//sample
App.ViewGoesHereView = Ember.View.extend({
    templateName: function(){
        var templateName = 'baseTemplate';

        var value = this.get('controller.model.Name');

        if (Ember.compare(value, 'abc') === 0) {
            templateName = 'abcTemplate';
            return templateName;
        }

        else if (Ember.compare(value, 'xyz') === 0) {
            templateName = 'xyzTemplate';
            return templateName;
        }

        return templateName;

    }.property('controller.model.Name'),
    //new property to re-render the view
    reRenderView: function () {
        this.rerender();
    }.observes('controller.model.Name')

});

NOTE: I haven't tested this code since I didn't had the full use case of your scenario. Please do revert back if this dosen't works.

Answer 2

I realized that value ('controller.model.Name') was't being updated every time a new link from the side-bar was clicked. So I inserted a jquery function to get the updated name on every click, and assign that to value variable.

App.ViewGoesHereView = Ember.View.extend({
    templateName: function(){
        var templateName = 'baseTemplate';

        var val = this.get('controller.model.Name');
        var value;

        $(document).ready(function () {
            $('li').click(function () {
                val = ($(this).text());
            });
        });

        value = val;

        if (Ember.compare(value, 'abc') === 0) {
            templateName = 'abcTemplate';
            return templateName;
        }

        else if (Ember.compare(value, 'xyz') === 0) {
            templateName = 'xyzTemplate';
            return templateName;
        }

        return templateName;

    }.property('controller.model.Name'),

});