CODEWITHSUNDEEP
javascriptbackbone.js
URL87
URL87

Reputation: 11032

Template with backbone.js

Having a simple template with backbone.js -

jsTemplateBackbone.html

<html>
<head>
    <script src="jquery-2.1.0.min.js"></script>
    <script src="json2.min.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <!--Order is important !!!--> 
</head>
<body>
        <script type="text/template" id="item-container">
            <li><%= value %></li>
        </script>
        <script src="jsBackboneHomeView.js"></script>
</body>
</html>

jsBackboneHomeView.js

//Model
Wine = Backbone.Model.extend();

// Collection
Wines = Backbone.Collection.extend({
    Model: Wine,
    url: "#"
});
// Collection object
wines = new Wines([
    { name: "Robert Mondovi" },
    { name: "CakeBread" }
]);


// List
ListView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        // grabing the html template
        this.template = _.template($('#item-container').html());
    },
    render: function () {
        var el = this.$el, template = this.template;
        el.empty();

        wines.each(function (wine) {
            el.append(template(wine.toJSON()));
        });

        return this;
    }
});

// View
HomeView = Backbone.View.extend({
    el: 'body',
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.empty();
        this.$el.append("<h1>My App</h1>");
        listView = new ListView();
        // append two <li> on <ul> and return it 
        this.$el.append(this.listView.render().el);

        return this;
    }
});
// View instance
wineApp = new HomeView();

when I execute it , it gives an error - 

Uncaught TypeError: Cannot call method 'replace' of undefined -  underscore.js:1236
line 1236 -  text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {

What is wrong here ?

(The code taken from this tutorial . )

Upvotes: 0

Views: 539

Answers (2)

CosmicChild
CosmicChild

Reputation: 181

in your ListView render function, instead of returning this, return the values you want to be available as an object,

e.g.

return({
    el: el
});

Upvotes: 0

darma
darma

Reputation: 4747

The property in your model is called name while it is value in your template, and thus it can't be replaced. Try :

<li><%= name %></li>

in your template.

Upvotes: 2

Related Questions