nakavt bir anahtar değeri nesne

Question

Ben şu modellerini açılır listesinden bağlamak:

var allCategories = [{ 
    id: 1, 
    name: 'Red'}, 
{ 
    id: 5, 
    name: 'Blue'}]; 

function model() { 
    self = this; 
    self.name = ko.observable(""); 
    self.categoryId = ko.observable(-1); 
    self.categoryName = ko.computed(function() { 
     if (self.categoryId() == -1) return ""; 
     return getCategoryNameById(self.categoryId()).name; 
    }); 
} 

function getCategoryNameById(id) { 
    return _.find(allCategories, function(cat) { 
     return cat.id == id; 
    }); 
} 

Ben kategori seçmek için bir açılır menü sunmak istiyorum ancak nasıl olduğunu bağlamak için hiçbir ipucu var. Belki modellerim ile yanlış bir yaklaşım kullandım ama büyük olasılıkla veriyi sunucudan nasıl alacağım, bu yüzden JS'mi bu konuya sarmayı denedim.

böyle bir şey denedim:

<select data-bind="options: categories, optionsText: 'name', value: 'id', optionsCaption: 'Categorie...'"></select> 

Ama modeline categoryId tarafındaki açılır değerini nasıl bağlanacağını alamadım.

Adı özelliği için çalışan bir ciltleme ile birlikte a fiddle.

Answer 1

Liste kutunuz için belirtmeniz gereken: options, optionsText, optionsValue ve value. value (o an seçili olan değer), model.categoryId() ürününüze işaret etmelidir. Ve optionsValue listesi için değerler elde etmek özellik adıdır:

<select data-bind="options: categories, optionsText: 'name', optionsValue: 'id', value: $root.model.categoryId(), optionsCaption: 'Categorie...'"></select> 

Ve işte bu kadar. Ve çalışma kemanı:

Answer 2

Doğru olan Max Schmelevs yanıtına göre, öğeyi bir açılır menüden değiştirdiğinizde bu işlevsellik JSON nesnesini değiştirmez.

Yani burada onun kodu için benim düzeltmeleri şunlardır:

HTML Kodu:

<div id="container"> 
    <!-- Here I've added valueUpdate on keydown --> 
    <input data-bind="value: model.name, valueUpdate:'afterkeydown'" /> 
    <!-- NOTE: Here you should call value like $root.model.categoryId --> 
    <select data-bind="options: categories, optionsText: 'name', optionsValue: 'id', value: $root.model.categoryId, optionsCaption: 'Categorie...'"></select> 
    <span data-bind="text: ko.toJSON($data.model)"></span> 
</div> 

JavaScript Kodu:

var allCategories = [ 
    {id: 1, name: 'Red'}, 
    {id: 5, name: 'Blue'}]; 

function model() { 
    self = this; 
    self.name = ko.observable(""); 
    self.categoryId = ko.observable(1); 
    self.categoryName = ko.computed(function() { 
    //NOTE: Here we should check if categoryId() is defined or not 
    if (!self.categoryId()) return ""; 
     return getCategoryNameById(self.categoryId()).name; 
    }); 
} 

function getCategoryNameById(id) { 
    return _.find(allCategories, function(cat) { 
     return cat.id == id; 
    }); 
} 

var viewModel = {}; 
viewModel.model = new model(); 
viewModel.categories = allCategories; 
ko.applyBindings(viewModel, document.getElementById('container')); 

!!! ÖNEMLİ !!!

Bu yaklaşım sorunuzu yanıtlıyorsa, lütfen Max Shmelev'in cevabını doğru olarak seçin, benimki değil, çünkü onun koduna bazı açıklamalar koydum. Bu hızlı ve yararlı bir cevap için