CODEWITHSUNDEEP
backbone.jshandlebars.js
sly_Chandan
sly_Chandan

Reputation: 3515

View not giving the desired output

<script id="entry-template" type="text/x-handlebars-template">
        <h2>This is the template</h2>
        {{ count }} items
    </script>
    <script type="text/javascript">
        var MyNamespace = {};

        $(document).ready(function () {

            MyNamespace.Recipe = Backbone.View.extend({
                tagName: "li",
                render: function () {
                    return this.$el.text("Chicken Chilly");
                }
            })


            MyNamespace.MyTagView = Backbone.View.extend({

                initialize: function () {
                    this.render();
                },
                render: function () {
                    var template = Handlebars.compile($("#entry-template").html());
                    this.$el.html(template);
                    return this;
                },
                count: 4
            });
            var View = new MyNamespace.MyTagView();
            $("#content").html(View.el);
        });


    </script>

I get the output as 0 items , instead of 4 items

Upvotes: 0

Views: 26

Answers (1)

jonasnas
jonasnas

Reputation: 3570

In this line:

template: template('entry-template'),

you are generating html of your compiled template and 'entry-template' context object (it's not an id, it's value object to your template). After generating that html you assign it to template property of MyNamespace.MyTagView

Later, in the render method, you are calling this template property (which is html) as it was a function:

this.$el.html(this.template(this));

but it is not a function, but a property containing generated html.

You should assign template like this:

template: template,

Upvotes: 1

Related Questions