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つの列がありますが、行が進む限り、各セットに必要な長さになる場合があります。

これは、クライアント側で処理してdivをHTMLに変換した後、divにデータを入力するために使用されます。これは、相関的に必要な範囲まで拡張できます。フレームワークの1つのビューを表すこのデータチャンクを計画していました。

<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 に答える