Question

In my json data, i am getting projectName and assignedTo values(it accrues in all data),

example data:

  [ {projectName:'project1',assignedTo:'some1'},{projectName:'project2',assignedTo:'some2'}]

my template is: (including my confused stuff)

<script id="listTemplate" type="text/template">
    <a href="#"><%= projectName === projectName ? projectName : taskStatus%></a>//not works how can i mange?
</script>

In my view, i am converting the model "toJSON()", but i am getting the project name alone in the 2 links what i am use.

my request, Is it possible to use a single template to print two different values? – as a first time i need to print project name, later taskStatus with some condition, if so any suggestion please

Answer 1

The reason why it is constantly printing project name is because, in the template, you have…

<a href="#"><%= projectName === projectName ? projectName : taskStatus%></a>

projectName would always equal to projectName. What you’ll want to do in this case is, in your Backbone.View, when you serialize the Model to be consumed by the template, you can do this…

Backbone.View.extend({
    events: {
        // An example on how to change the display
        'click button.change-display': 'onChangeDisplayClicked'   
    },
    template: _.template(...),

    // Controls whether project name should be shown or not.
    showProjectName: true,

    onChangeDisplayClicked: function() {
        // Flip the switch
        this.showProjectName = !this.showProjectName;

        // Re-render the View
        this.render();
    },

    serialize: function() {
        // Grab the data from model
        var data = this.model.toJSON();

        // Pass this data to the template to control what to be displayed.
        data.showProjectName = this.showProjectName;
        return data;
    },

    render: function() {
        this.$el.html(this.template(this.serialize()));
    }
});

… and in your template, you would…

<script id="listTemplate" type="text/template">
    <a href="#"><%= showProjectName ? projectName : taskStatu s%></a>
</script>