2016-04-27 4 views
0

私はobservableArrayを使用してforeachを実行しようとしていますが、結果が得られません。ノックアウトjs observableArrayが動作していません

デバッグ中のjavascriptファイルでは、データが配列にロードされています。 htmlコードを以下に示す:

<!-- ko foreach: currencyarr --> 
    <option data-bind="value:id, text:label"></option> 
<!-- /ko --> 

、次のようにJSONファイルの内容は、次のようにノックアウトJSを使用して

"name" : "shuvagho", 
"curarr" : [ 
      {"id": "inr", "label": "INR"}, 
      {"id": "usd", "label": "USD"}, 
      {"id": "aud", "label": "AUD"}, 
      {"id": "sgd", "label": "SGD"} 
] 

とJavaScriptのコードは次のとおりです。

self.currencyarr = ko.observableArray(); 
self.currencyarr(data.curarr); 

答えて

2

あなたが忘れてしまいましたforeach内で$ dataを使用する。

var ViewModel = function(){ 
 
     var self = this; 
 
     self.currencyarr = ko.observableArray(); 
 
     self.currencyarr(data.curarr); 
 
    } 
 
    var data = { 
 
    "name" : "shuvagho", 
 
    "curarr" : [ 
 
       {"id": "inr", "label": "INR"}, 
 
       {"id": "usd", "label": "USD"}, 
 
       {"id": "aud", "label": "AUD"}, 
 
       {"id": "sgd", "label": "SGD"} 
 
    ]}; 
 

 
    var viewModel = new ViewModel(); 
 

 
      ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select> 
 
<!--ko foreach: currencyarr--> 
 
    <option data-bind="text:$data.label, value:$data.id" ></option> 
 
<!--/ko--> 
 
</select>

また、selectタグのオプションを結合することができます。

var ViewModel = function(){ 
 
    var self = this; 
 
    self.currencyarr = ko.observableArray(); 
 
    self.currencyarr(data.curarr); 
 
} 
 
var data = { 
 
"name" : "shuvagho", 
 
"curarr" : [ 
 
      {"id": "inr", "label": "INR"}, 
 
      {"id": "usd", "label": "USD"}, 
 
      {"id": "aud", "label": "AUD"}, 
 
      {"id": "sgd", "label": "SGD"} 
 
]}; 
 

 
var viewModel = new ViewModel(); 
 

 
     ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options:$root.currencyarr, optionsText: 'label',optionsValue:'id'"></select>

+0

私は上記のすべてのコーディングをしましたが、それでも私のことができることができませんでした。 observablearray()だけで起こっています。私がobservable()を使ってテキストを表示すると、それは完全に表示されています。 –

+0

すべてのコードをここに掲載できますか? – Guto

関連する問題