매핑 플러그인을 사용하여 녹아웃을 백엔드에 연결하는 방법은 무엇입니까?

Question

저는 knockoutjs를 처음 접했고 그 장점/잠재력을 볼 수 있습니다. 나는 꽤 간단한 질문이라고 생각한다.

서버에서 관측 가능한 배열을 어떻게 채울 수 있습니까? 2 개의 하드 코딩 된 배열 요소로 작업하고 싶지만 백엔드에 연결하는 방법을 모르겠습니다. 내가 잘못 그것에 대해 갈거야 만약 내가 제안을 열어주는 말들하지만

여기에, 그래서 적어도 내 머리에 jsfiddle http://jsfiddle.net/P9LLL/

입니다. 이 행을 db에서로드 할 수있는 것으로 대체하는 방법은 무엇입니까?

new SeatReservation("Bandaid", 10), 
new SeatReservation("Bandages", 12) 

나는 녹아웃 플러그인 매핑 http://knockoutjs.com/documentation/plugins-mapping.html보고 친구에 의해 제안하지만 내 예에 통합하는 방법을 잘하고있다.

가치가있는 무엇을 나는 PHP & 또한 사용하고있다.

의견을 보내 주셔서 감사합니다.

Answer 1

네, 친구가 맞다, mapping.fromJS는 관찰 가능한을 가진 개체로 원시 JSON 변환하는 것이 좋다. 이 경우 클라이언트 측의 데이터를 업데이트해야하는 경우 관찰 가능 항목이 필요하다는 점을 기억하십시오. 데이터 만 표시하려면 관측 가능 항목이 필요하지 않습니다.

간단한보기 모델 : 나는 그것이 도움이되기를 바랍니다

// raw data from DB 
var raw = [{ 
    itemName: "Item1", 
    defaultQuantity: 10 
}, { 
    itemName: "Item2", 
    defaultQuantity: 12 
}]; 


function SeatReservation(item) { 
    var self = this; 
    // converts each property (of item) into observable and set it to self. 
    ko.mapping.fromJS(item, {}, self); 

    // fromJS creates these observables for you: 
    // self.itemName = ko.observable(item.itemName) 
    // self.defaultQuantity= ko.observable(item.defaultQuantity) 

} 

function ReservationsViewModel() { 
    var self = this; 

    // Converts each item into a SeatReservation (Like a Select in MySql) 
    self.kits = ko.utils.arrayMap(raw, function (item) { 
     return new SeatReservation(item); 
    }); 
} 

ko.applyBindings(new ReservationsViewModel()); 

See working fiddle

.

Answer 2

당신은 (바이올린 크롬에서 작동하지 않습니다)

http://jsfiddle.net/P9LLL/1/

function ReservationsViewModel(data) { 
    this.kits = ko.observableArray(); 

    ko.mapping.fromJS(data, {}, this); 
} 

var jsonDataFromBackend = { kits: [{ itemName: "Item1", defaultQuantity: 10 },{ itemName: "Item2", defaultQuantity: 12 } ] }; 
ko.applyBindings(new ReservationsViewModel(jsonDataFromBackend)); 

이 키트의 각 항목에 대해 동적 유형을 만들 것 같이 그것을 할 수 있습니다. 대신 할, 좋은 방법으로 이들에 계산 및 기타 기능을 추가하지 못할

http://jsfiddle.net/P9LLL/2/

function SeatReservation(data) {  
    ko.mapping.fromJS(data, {}, this); 
    this.total = ko.computed(function() { 
     return this.price() * this.defaultQuantity(); 
    }, this); 
} 


function ReservationsViewModel(data) { 
    this.kits = ko.observableArray(); 
    var mapping = { 
     kits: { 
      create: function(options) { 
       return new SeatReservation(options.data); 
      } 
     } 
    }; 

    ko.mapping.fromJS(data, mapping, this); 
} 

var jsonDataFromBackend = { kits: [{ itemName: "Item1", defaultQuantity: 10, price: 2 },{ itemName: "Item2", defaultQuantity: 12, price: 5 } ] }; 
ko.applyBindings(new ReservationsViewModel(jsonDataFromBackend));