0

ここ数日、Knockout と Backbone をいじっていて、Knockout のバインド機能と Backbone のデータ モデリング マジックを組み合わせた KnockbackJS フレームワークに出会いました。

この単純な例では、バックボーン モデルのバックボーン コレクションがあり、それらを HTML にバインドする際に問題が発生しています。

これは私のJavaScriptです：

var Model = Backbone.Model.extend({
    defaults: {
        firstName: "",
        lastName: ""

    }
});



var Collection = Backbone.Collection.extend({
    data : Model
});


var temp1 = new Model({firstName: "aaa", lastName:"bbb"});
console.log("new model");

var temp2 = new Model({firstName: "BBB", lastName:"CCCC"});
console.log("newest model");


var collection = new Collection([temp1, temp2]);

//---------Knockout/Backbone bridge---------

var view_model = kb.viewModel(collection, { read_only: true });

ko.applyBindings(view_model);

...そして私の単純なHTML：

<div data-bind="foreach: data">
   <span data-bind="text: name"></span>
   <span data-bind="text: artist"></span>
</div>

JSfiddle のこの例

コレクション内のモデル内のデータにアクセスできません。手がかり、ヒント、ヒントはありますか？

4

1 に答える 1

0

私はそれを手に入れました、これがJSコードです：

console.clear();
var PersonModel = Backbone.Model.extend();


var model1 = new PersonModel({firstName: "aaa", lastName:"bbb"});
var model2 = new PersonModel({firstName: "CCCC", lastName:"DDDD"});

var PersonViewModel = function (person) {

    this.firstName = kb.observable(person, 'firstName');
    this.lastName = kb.observable(person, 'lastName');
    this.fullName = ko.computed((function () {
        return "" + (this.firstName()) + " " + (this.lastName());
    }), this);
};

var PersonsModel = Backbone.Collection.extend({ model: PersonModel});
var personsModel = new PersonsModel([model1,model2]);

var PersonsViewModel = function (persons) {
    this.persons = kb.collectionObservable(persons);
};

var personsViewModel = new PersonsViewModel(personsModel);

ko.applyBindings(personsViewModel, $('#kb_collection_observable')[0]);

...そしてここにHTMLがあります:

<div id="kb_collection_observable">
                <div data-bind="if: persons">
                    <span>Data </span>
                </div>
                <div data-bind="foreach: persons">
                    <p>First name: <input class='text' data-bind="value: firstName" /></p>
                    <p>Last name: <input class='input-small pull-right' data-bind="value: lastName" /></p>
                </div>
</div>

このSO投稿のおかげで

于 2013-05-09T11:46:27.870 に答える