CODEWITHSUNDEEP
backbone.jsbackbone-views
akruspe
akruspe

Reputation: 151

Rendering a template getting the data from a model in Backbone

I'm having some issues with rendering my view in backbone getting the data from my model so I'd appreciate any help. Here goes my html code:

<ul id="datos">

</ul>

<script type="text/template" id="listado-template"> 
    <h2>Mi listado</h2>
    <li>Item 1: <%= item1 %></li>
</script>

<script>
    modelo = new Modelo();    
    modeloView = new ModeloView({model: modelo});
</script>

And this are my model and my view:

Modelo = Backbone.Model.extend({
    urlRoot: 'myurljson',
});

Backbone.View.extend({ 
    tagName: "ul",

    el: "#datos",

    template: _.template($('#listado-template').html()),

    initialize: function() {    
        this.model.on('change', this.render, this); 
    },

    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
        return this;
    }
});

The problem is my template is not renderized well. I'm getting an undefined error with item1. But if I delete this tag li, the tag h2 is renderized so I guess the problem is in getting my data from my model through "myurljson". Any help? Thank you!

Upvotes: 1

Views: 131

Answers (1)

nikoshr
nikoshr

Reputation: 33344

Underscore will fail if you try to render an undefined variable. See this Fiddle trying to reproduce your problem : http://jsfiddle.net/nikoshr/PELfV/

You can

  • define a default item1 property in your model wit a sensible value

    Modelo = Backbone.Model.extend({
    urlRoot: 'myurljson',
    defaults: {
        item1: ''
    }
});

    A demo at http://jsfiddle.net/nikoshr/PELfV/1/

  • or test the value before printing it

    <script type="text/template" id="listado-template"> 
    <li>Item 1: <% if (typeof item1!=="undefined") print(item1) %></li>
</script>

    And its demo http://jsfiddle.net/nikoshr/PELfV/2/

Upvotes: 2

Related Questions