如何使用映射插件將淘汰賽與後端綁定？

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 &也是MySQL。

非常感謝您的任何建議。

Answer 1

是的，你的朋友是對的，mapping.fromJS是很好的生JSON轉換成具有可觀察的對象。爲了以防萬一，請記住，如果您需要更新客戶端數據，則需要使用observables。如果你只想顯示數據，那麼觀察對象就沒有必要了。

簡單視圖模型：

// 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));