0

I just started learning Backbone and from what I've seen so far when you create a view and you define a tagName and a className the view you create is created inside that element but it doesn't that it works on the code below, could someone please explain to me why? I've spend wayyy too much time on this and my head is spinning.

var app = {};

(function ($) {
    app.Todo = Backbone.Model.extend({
        defaults : {
            name : '',
            priority: '',
            description: ''
        }
    });

    app.TodoList = Backbone.Collection.extend({
        model: app.Todo,
        url: '#todolist'
    });

    app.TodoListView = Backbone.View.extend({
        tagName: 'ul',
        className: 'todolist',
        initialize: function() {
            this.template = _.template($('#todolist-template').html());
            this.render();
        },
        render: function() {
            this.$el.empty();
            this.$el.append(this.template({items: this.collection.toJSON()}));
            return this;
        }
    });
    app.todoList = new app.TodoList([
        new app.Todo({
            name: 'unclog the sink',
            priority: '10',
            description: 'FIX THE SINK!!!'
        }),
        new app.Todo({
            name: 'get bread',
            priority: '0',
            description: 'We are out of bread, go get some'
        }),
        new app.Todo({
            name: 'get milk',
            priority: '2',
            description: 'We are out of milk, go get some'
        })
    ]);

    new app.TodoListView({el: $('#container'), collection: app.todoList});
})(jQuery);

template:

<script type="text/template" id="todolist-template">
    <% _.each(items, function(item){ %>
        <li>
            <%= item.name %>
            <%= item.description %>
            <%= item.priority %>
        </li>
    <%}); %>
</script>

result:

<div id="container">    
    <li>unclog the sink FIX THE SINK!!! 10</li>
    <li>get bread We are out of bread, go get some 0</li>
    <li>get milk We are out of milk, go get some 2</li> 
</div>
4

2 回答 2

0

I am not expert in BackboneJS but trying to resolve the issue. As per backboneJS doc about el property, its always there in to render backbone view. The default element is <div> if you don't specify. You have understood right, that element would be render inside it. In your code you are providing <div> element as an el, so its overriding your tagName property when creating new object of view. And another thing is you are calling render before creating object which may cause a problem. So as per my opinion, you code should looks like this : 

 $("$container").html((new app.TodoListView({collection: app.todoList})).render())
于 2013-09-17T14:20:43.917 回答
0

You should read about the el property of View, here. When you specify tagName and className it creates the DOM element <ul class="todolist"></ul> but doesn’t append it to the DOM. If the element already exists in the DOM, you can set el as a CSS selector that matches the element.

So in your case your template is getting created in an ul element, but the ul element itself is not added in the DOM.

Try doing following:

NOTE : div with an id as container should already be present in DOM.

View definition: 

app.TodoListView = Backbone.View.extend({
        el: '#container',
        initialize: function() {
            this.template = _.template($('#todolist-template').html());
            this.render();
        },
        render: function() {
            this.$el.html(this.template({items: this.collection.toJSON()}));
            return this;
        }
    });

Template:

 <script type="text/template" id="todolist-template">
        <ul class="todolist">
        <% _.each(items, function(item){ %>
            <li>
                <%= item.name %>
                <%= item.description %>
                <%= item.priority %>
            </li>
        <%}); %>
      </ul>
 </script>

View creation : 

new app.TodoListView({collection: app.todoList});
于 2013-09-17T17:51:28.480 回答