ノックアウトは、私は次のモデルを持っている

Question

をドロップダウンするために、キー値オブジェクトをバインド：

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

私はカテゴリを選択するドロップダウンを提供したいが、私はそれをバインドする方法を見当もつかない。 私のモデルで間違ったアプローチを使用したことがあるかもしれませんが、それはサーバーからデータを取得する方法の可能性が高いため、JSをその周りにラップしようとしました。

私はこのような何か試してみました：

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

をしかし、私はモデルcategoryIdにドロップダウン値を接続する方法を得ることはありません。

ここには、名前プロパティの作業バインディングを持つa fiddleがあります。

Answer 1

リストボックスには、options、optionsText、optionsValue、およびvalueを指定する必要があります。 value（現在選択されている値）は、model.categoryId()を指す必要があります。そしてoptionsValueは、リストの値を取得するプロパティ名です。

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

これだけです。 http://jsfiddle.net/Y7Nrc/

Answer 2

これは正解ですが、アイテムをドロップダウンから変更してもこの機能はJSONオブジェクトを変更しません。だからここ

は彼のコードのための私の修正です：

HTMLコード：

<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のコード：

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

!!!重要!!!

あなたの質問に答えた場合は、自分のコードにいくつかの発言を書いたので、Max Shmelevの回答を正しいものとして選択してください。