0

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

这是当前版本，我想将其更改为使用集合：

// 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()

所以我有什么作品，但它并没有真正做到“骨干方式”。这似乎有点毫无意义，因为：

  1. 最好使用集合，而不是数组
  2. 将项目添加到数组时呈现视图会更好
  3. 它不是骨干真的是它..

感谢任何指针，如果您不能提供具体的代码示例，我仍然非常感谢涵盖此问题的链接和资源。

干杯，

理查德

4

1 回答 1

1

您认为当前的实现不是 Backbone 方式的权利。您所做的大部分工作都是由骨干网中的集合对象直接处理的。在主干中，集合本质上只是一个带有附加方法的数组。这些方法赋予了集合它们的力量。Backbone 具有许多功能，包括：

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

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

            /**
     * 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;
        }
    });
于 2012-09-03T22:52:55.043 回答