KnockbackJS를 통해 Backbone 모델의 백본 컬렉션에있는 데이터로 이동

Question

나는 Knockout과 Backbone으로 지난 며칠간 놀았으며 Knockout의 바인딩 파워와 Backbone의 데이터 모델링 마법을 결합한 KnockbackJS 프레임 워크를 발견했습니다.

이 간단한 예제에서 Backbone 모델의 백본 컬렉션이 있고이를 내 HTML에 바인딩하는 데 문제가 있습니다.

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

에