0

我正处于将我的应用程序移动到主干框架的开始阶段。

我有一些来自 ajax 调用的 json 数据

{f1:"f1_value", f2:"f2_value", f3:"f3_value"},
{f1:"f1_value", f2:"f2_value", f3:"f3_value"},
{f1:"f1_value", f2:"f2_value", f3:"f3_value"},

这个数据集总是有 3 列，但只要每组需要的行数就可以了。

它用于在将客户端处理为 HTML 后填充 div，相应地可以根据需要向下扩展。我正在计划这个数据块代表框架中的一个视图。

<div id = "data_hold"></div>

我如何将其与框架匹配：

    var ModelTest,
        CollectionTest,
        ViewTest;

    ModelTest = Backbone.Model.extend({
    });
    CollectionTest = Backbone.Collection.extend({
        model: ModelTest
    }
    ViewTest = Backbone.View.extend({
    });
4

1 回答 1

2

骨干网 101：

var ModelTest,
    CollectionTest,
    ViewTest;

ModelTest = Backbone.Model.extend({ });

// associate your collection with a URL.  This is static here; it can be
// passed in as an option using the Collection's initialize function()
// instead.

CollectionTest = Backbone.Collection.extend({
    model: ModelTest,
    url: 'http://localhost/my_json_source'
});

ViewTest = Backbone.View.extend({
    // Have a target to render into.  This can be an existing element, as  
    // here, or it can be dynamically generated and attached to the DOM
    // programattically.
    el: $('#data_hold'),

    // specify than when the collection is updated, call the local render
    // method.

    initialize: function(options) { 
        this.collection.bind('reset', _.bind(this.render, this));
    },

    // Empty the element, then append subsequent rows of the collection
    // to it as paragraphs.  The '_this = this' idiom allows us to access
    // the outside context (the View's context), since the each() call 
    // will create a new inner context.

    render: function() {
        var _this = this;
        this.$el.html('');
        this.collection.each(function(l) {
            _this.$el.append('<p>' + l.get('f2') + '</p>');
            });
    }
});

// initialize the collection and view, then fetch the collection, which
// will trigger the render after the collection has been updated.

$(function() {
    ct = new CollectionTest();
    vt = new ViewTest({collection: ct});
    ct.fetch();
});
于 2013-03-15T18:48:43.117 回答