通過KnockbackJS處理骨幹模型的Backbone集合中的數據

Question

過去幾天我一直在使用Knockout和Backbone，並且遇到了KnockbackJS框架，它將Knockout的綁定功能與Backbone的數據建模魔力相結合。

在這個簡單的例子，我有骨幹機型的骨幹收集和我有他們結合到我的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> 

This example in JSfiddle

我無法獲取數據模型內的採集。任何線索，提示，技巧？

Answer 1

我知道了，這裏是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> 

由於this SO post