Knockout.js - ドロップダウンが変更されたときにテキストボックスを更新する

Question

選択の値を変更すると、テキストボックスを更新しようとしています。

これはかなり単純ですが、私はテキストボックスをデータを簡単に更新するようには考えていません。

は、ここで私はこれまで何ができるかです：

• キャッチ変更イベント
• が選択ドロップダウンから

をIDを取得します。ここで私が何をしたいです：

• 選択したIDを使用して、ビューモデル内のオブジェクトの配列内からプロパティ値を返します。ただし、IDが配列インデックスと一致しません（つまり、選択されたIDは「43」ですが、インデックスは0です）。

私のノックアウトコードはかなり基本的なものであり、その代わりに私はVM構造を投稿します。

ViewModel 
--> Property1 
--> Property2 
--> Array 
    --> Object[0] 
     --> "Property to match with the selected ID" 
     --> "Property that I want to return" 
    --> Object[1] 

これはどれくらい意味があるのか​​は分かりません。

その他の情報を提供することができます。

ありがとうございます！

EDIT

VM

var PurchaseOrderViewModel = function (data) { 
    var self = this; 

    self.UpdateCurrency = function (data, event) { 
     // 
    } 
    self.UpdateSupplierContactDetails = function (data, event) { 
     // 
    } 

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

$(document).ready(function() { 
    var viewModel = new PurchaseOrderViewModel(@Html.Raw(jsonString)); 

    ko.applyBindings(viewModel); 
}); 

誰がここに問題がある場合には実用的なソリューションを得ることができたEDIT＃2

は、私はその周りに働いていた方法です。私はあなたを考えるコードは（1）を探している、とのコード私はあなたが書くべきだと思う（2）：

var contact = ko.unwrap(ko.utils.arrayFirst(self.AllSupplierContacts(), 
    function (item) { 
     return ko.unwrap(item.Id) === newID; 
    }).BusinessTelephoneNumber); 

Answer 1

は、この答えは2つの部分があります。

ノックアウトのoptionsない結合：

ko.applyBindings(new function() { 
 
    
 
    this.ids = ["A", "B", "C", "D"]; 
 
    this.selectedId = ko.observable(); 
 
    
 
    this.items = [ 
 
    { key: "A", value: 1 }, 
 
    { key: "B", value: 2 }, 
 
    { key: "C", value: 3 }, 
 
    ]; 
 
    this.selectedValue = ko.pureComputed(function() { 
 
    var selectedId = this.selectedId(); 
 
    
 
    // Find the object in items of which the property 
 
    // `key` matches the `selectedId` and return it 
 
    var match = this.items.find(function(item) { 
 
     return item.key === selectedId; 
 
    }); 
 
    
 
    return match ? match.value : "No item found"; 
 
    }, this); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options: ids, value: selectedId"></select> 
 

 
<div> 
 
    Your selected value: <strong data-bind="text: selectedValue"></strong> 
 
</div>

2.選択する実際の要素をバインドIDに一致する項目を見つける

1多くのものが箱から出てきます。おそらく、idsとitemsを別々に保存する必要はありません。バインディングを伝えることで、それが値（optionsValue）として保存するためにドロップダウン（optionsText）でレンダリング、およびその必要のあるプロパティ、あなたが同じことを行うためにはるかに少ないコードが必要になります：

ko.applyBindings(new function() { 
 
    
 
    this.items = [ 
 
    { key: "A", value: 1 }, 
 
    { key: "B", value: 2 }, 
 
    { key: "C", value: 3 }, 
 
    { key: "D", value: 4 } 
 
    ]; 
 
    
 
    this.selectedValue = ko.observable(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options: items, 
 
        optionsText: 'key', 
 
        optionsValue: 'value', 
 
        value: selectedValue"></select> 
 

 
<div> 
 
    Your selected value: <strong data-bind="text: selectedValue"></strong> 
 
</div>

Answer 2

「配列内のIDを参照する」という問題は、IDを一切使わずに配列項目自体を処理することによって、横断することができます。

function MyList(params) { 
 
    var self = this; 
 

 
    // observables 
 
    self.items = ko.observableArray(); 
 
    self.selectedItem = ko.observable(); 
 

 
    // init 
 
    ko.mapping.fromJS(params, {}, self); 
 

 
    // post-init 
 
    self.items.sort(function (a, b) { 
 
     return ko.unwrap(a.key) < ko.unwrap(b.key) ? -1 : 1; 
 
    }); 
 
} 
 

 
ko.applyBindings(new MyList({ 
 
    items: [ 
 
     { key: "D", id: 4 }, 
 
     { key: "A", id: 3 }, 
 
     { key: "B", id: 2 }, 
 
     { key: "C", id: 1 } 
 
    ] 
 
})); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 

 
<select data-bind=" 
 
    optionsCaption: 'Please select...', 
 
    options: items, 
 
    optionsText: 'key', 
 
    value: selectedItem 
 
"></select> 
 

 
<div data-bind="with: selectedItem"> 
 
    Your selected value: <strong data-bind="text: id"></strong> 
 
</div> 
 

 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>