javascript - 列表的 Backbone subview

Question

我很难理解 Backbone 的 subview ，我正在努力学习如何使用它们。

我想创建一个简单的无序列表，使用容器的主视图和每个列表项的 subview 。

这是我目前拥有的 fiddle :http://jsfiddle.net/LrZrJ/

这是我最终希望看到的 HTML:

<div class="js-container">
    <h3>Stat = ok</h3>
    <ul>
        <li>Hello world</li>
    </ul>
</div>

这是我的 JavaScript:

var TheModel = Backbone.Model.extend({
    default: {
        photos: '',
        stat: ''   
    }
});

var TheCollection = Backbone.Collection.extend({
    model: TheModel,

    url: 'http://api.flickr.com/services/rest/?page=1&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=candy&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?'

});

// The main view
var List = Backbone.View.extend({
    el: '.js-container',

    initialize: function () {
        this.collection = new TheCollection();

        this.item = new ListItem();

        return this;
    },

    render: function () {
        var self = this;

        this.collection.fetch({
            dataType: 'jsonp',
            success: function (data) {
                var listTemplate = _.template( $('#listContainer').html(), {
                    collection: self.collection.toJSON()
                });

                self.$el.html(listTemplate);
                self.$el.html( self.item.render() );
            }
        });

        return this;
    }

});

var ListItem = Backbone.View.extend({
    render: function () {
        var itemTemplate = _.template( $('#item').html(), {} );

        return itemTemplate;
    }

});

var myList= new List();
myList.render();

这是我的 HTML:

<script type="text/template" id="listContainer">
    <h3>Stat = <%- collection[0].stat %></h3>
    <ul>

    </ul>
</script>

<script type="text/template" id="item">
    <li>Hello world</li>
</script>

<div class="js-container">
</div>

Answer 1

你快到了。你在这里有两个问题:

self.$el.html(listTemplate);
self.$el.html( self.item.render() );

首先，jQuery 的 html function替换一切:

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content.

这意味着您的第二个 .html调用:

self.$el.html( self.item.render() );

覆盖第一个的所有内容。您可能想使用 append 相反，这只会添加 <li>无论你append到。您还需要 append到 <ul> , 而不是 self.$el ;主干包括一个方便的 this.$ 在 View 的 el 中搜索的功能:

$ (jQuery) view.$(selector)

[...] It's equivalent to running: view.$el.find(selector)

所以要找到<ul>并把 <li>在里面，你可以这样说:

self.$('ul').append(self.item.render())

当我在这里时， View 的 render 很常见至 return this然后调用者会 something.append(v.render().el)将 View 放到页面上。你可以使用 setElement 替换 subview 的 el用你的<li>来自模板:

var ListItem = Backbone.View.extend({
    render: function () {
        var itemTemplate = _.template( $('#item').html(), {} );
        this.setElement(itemTemplate);
        return this;
    }
});

然后 self.$('ul').append(self.item.render().el)在 parent 中。

演示:http://jsfiddle.net/ambiguous/JHV9w/1/

另一种方法是添加 tagName: 'li'至 ListItem这样 Backbone 就会创建一个 <li>作为该 View 的 el然后删除 <li>...</li>从模板。那会给你一个 ListItem像这样:

var ListItem = Backbone.View.extend({
    tagName: 'li',
    render: function () {
        var itemTemplate = _.template( $('#item').html(), {} );
        this.$el.html(itemTemplate);
        return this;
    }
});

和一个#item像这样的模板:

<script type="text/template" id="item">
    Hello world
</script>

这种结构 (IMO) 比您目前使用的结构更标准(但 Backbone 不是很固执己见，所以做对您有用的事情)。

演示:http://jsfiddle.net/ambiguous/DVFVT/