Question

我对骨干很新，需要用它来创建一个列表项。每个列表项都有一个模型和一个视图。因为它的列表似乎是收藏的理想解决方案，但我很难使用它们。

这是当前版本，我想要使用集合：

// The Model & view
var IntroModel = Backbone.Model.extend({});
var Introview = Backbone.View.extend({
    template: _.template( $('#taglist-intro').text() ),
    render: function() {
        console.log( this.model.attributes );
        this.$el.append( this.template( this.model.attributes ) );
    }
});

// We will store views in here
// Ideally this would be a collection
views = [];

// Get the data for that collection
$.getJSON( url, function( json ) {

    _.each( json, function( item ) {

        // Create each model & view, store views in the views array
        var model = new IntroModel( item );
        var view = new Introview({
        model : model
        })  
        views.push( view );

    })

})

// I can render a view like this
// But I'd rather it rendered the view when I add items to the collection
views[0].render()

所以我的工作，但它并没有真正做到'骨干方式'。这似乎有点无意义，因为：

最好使用集合，而不是数组
将项目添加到数组
它不是Backbone真的是它..

感谢任何指针，如果你无法提供具体的代码示例，我仍然非常感谢链接＆amp;覆盖这个问题的资源。

干杯，

理查德

Answer 1

您对当前实施不是Backbone方式的权利。您正在做的大部分内容由骨干中的集合对象直接处理。在骨干集合中，基本上只是一个附加了附加方法的数组。这些方法赋予收藏品力量。 Backbone有许多功能，包括：

'url'属性：使用此属性时，集合将在您运行fetch方法时自动填充（例如myCollection.fetch（））。
您可以将函数绑定到集合的“重置”事件。填充集合时会触发此事件。通过包含对集合渲染事件的调用，集合可以在集合更改时自动呈现相关视图。还有其他收集事件（例如'添加'新模型等），您也可以附加功能。

我发现Backbone文档是最好的起点。然而，一个简单的例子总是有用的。以下代码显示了如何定义简单集合，以及如何创建两个视图（一个视图创建列表，另一个视图呈现列表中的项目）。请注意在集合中使用url属性。当您运行fetch（）方法时，Backbone使用它来检索集合的内容（请参阅OrgListView对象）。还要注意视图的render方法如何绑定到集合'reset'事件，这可以确保在填充集合后调用render事件（请参阅OrgsListView的initialize方法）。

        /**
     * Model
     */
    var Org = Backbone.Model.extend();

    /**
     * Collection
     */
    var Orgs = Backbone.Collection.extend({
        model: Org,
        url: '/orgs.json'
    });

    /**
     * View - Single Item in List
     */
    var OrgItemView = Backbone.View.extend({
        tagName: 'li',
        initialize: function() {
            _.bindAll(this, 'onClick', 'render');
            this.model = this.options.model;
            // Create base URI component for links on this page. (e.g. '/#orgs/ORG_NAME')
            this.baseUri = this.options.pageRootUri + '/' + encodeURIComponent(this.model.get('name'));
            // Create array for tracking subviews.
            /*var subViews = new Array();*/
        },
        events: {
            'click a.test': 'onClick'
        },
        onClick: function(event) {
            // Prevent default event from firing.
            event.preventDefault();
            if (typeof this.listContactsView === 'undefined') {
                // Create collection of contacts.
                var contacts = new ContactsByOrg({ url: '/orgs.json/' + encodeURIComponent(this.model.get('name')) });
                this.listContactsView = new ListContactsView({ collection: contacts, baseUri: this.baseUri });
                this.$el.append(this.listContactsView.render().el);
            }
            else {
                // Close View.
                this.listContactsView.close();
                // Destroy property this.listContactsView.
                delete this.listContactsView;
            }
        },
        onClose: function() {
//      console.log('Closing OrgItemView');
        },
        render: function() {
            // TODO: set proper value for href. Currently using a dummy placeholder
            this.$el.html('<a class="test" href="' + this.baseUri + '">' + this.model.get('name') + '</a>');
            return this;
        }
    });

    /**
     * View - List of organizations
     */
    var OrgsListView = Backbone.View.extend({
        className: 'orgs-list',
        initialize: function() {
            console.log('OrgsListView');
            _.bindAll(this, 'render');
            this.pageRootUri = this.options.pageRootUri;
            this.collection = this.options.collection;
            // Bind render function to collection reset event.
                                this.collection.on('reset', this.render);
            // Populate collection with values from server.
            this.collection.fetch();
        },
        onClose: function() {
            this.collection.off('reset', this.render);
//      console.log('Closing OrgsListView');
        },
        render: function() {
            var self = this;
            this.$el.html('<ul></ul>');
            this.collection.each(function(org, index) {
                var orgItemView = new OrgItemView({ model: org, pageRootUri: self.pageRootUri });
                self.$('ul').append(orgItemView.render().el);
            });
            return this;
        }
    });

集合中的骨干视图

1 个答案: