2012-03-29 11 views
0

に更新されたときに、テーブル、私はここでの問題の例を作成しました更新されません実証するために公開Webサービスを指すように調整されています。KnockoutJS配列が

基本的には私はバインドする配列を持っていますが、ajax呼び出しの後ではテーブルには更新された情報が表示されません。私は何が不足しているのかわからない、私はマッピングプラグインが必要だったと思ったので、私はそれを試みたが、まだどこにもいない。

確かに、データが変更されるたびにバインディングを適用するつもりはありませんか?

[EDIT]

以下のJavaScript:

var ViewModel = function() { 
var self = this; 
self.items = ko.observableArray([]); 
self.refresh = function() { 
    $.ajax({ 
     type: "POST", 
     url: "http://api.wipmania.com/json", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      ko.mapping.fromJS(data.d, self.items.address); 
     } 
    }); 
}; 
} 

var viewModel = new ViewModel(); 
$(function() { 
ko.applyBindings(viewModel); 
viewModel.refresh(); 
}); 

下記のHTML:

<table data-bind="visible:items.length > 0"> 
<thead> 
    <tr> 
     <th>Country</th> 
     <th>Code</th> 
    </tr> 
</thead> 
<tbody data-bind="foreach: items"> 
    <tr> 
     <td data-bind="text:country"></td> 
     <td data-bind="text:country_code"></td> 
    </tr> 
</tbody> 
</table> 
+0

申し訳ありませんが、私は自分のコードを貼り付けるのに使っていましたが、JSFiddleの例はいつも尋ねられました。今私は両方を含めるよ。 - 編集され、修正されました。 – JustinN

+0

この行には '.address'がありますか? 'ko.mapping.fromJS(data.d、self.items.address);' – Niko

+0

良いことです。ええ、コピーと貼り付けは最高です(人々が何度も頻繁に再入力するのを驚かせます)。)、* adjunct *(私はhttp://jsbin.comが好きですが、好みの問題です)としてのライブリンクは素晴らしいです。 –

答えて

2

チェックアウトこのフィドル:すべてのhttp://jsfiddle.net/Gm7zH/1/

最初に私が原因でクロスドメインリクエストの偽のAjaxのデータを使用しています。それはあなたのサーバーから得たデータです。また、非同期リクエストをシミュレートするためにsetTimeoutを使用します。あなたは存在しない配列の性質アドレスにマップしよう

その後、エラーの数を行います。次に、あなたの結果のアドレスは単なるオブジェクトなので、それを動作させるために配列にラップします。

次に、既存のobservableArrayにマップしようとしますが、配列を2番目の引数として指定し、2番目の引数はマッピングオプションです.3番目の引数は正しい場所です。私は私の例ではマッピングオプションとしてnullを渡します。

最後に、表を表示するにはitems.length> 0とします。必要なのはitems()です。length> 0は基本配列の長さです。

+0

訂正された例と例についてMartinに感謝します。私はこれを使用してコードを修正しました。私が私の最初の質問を載せたひどい例のためにすべての人に私の謝罪、私はより明確なサンプルを将来提出しようとします。 – JustinN

0

あなたの配列がself.itemsですが、あなたのAJAX success呼び出しが、私は推測しているself.items.addressを、更新していますundefinedです。そのため、マッピングプラグインはという新しいモデルを作成しています。これはオリジナルとは関係ありません。確かに私はapplyBindingsにするたびに私のデータの変更を意味していないよ

(あなたがどのように見えるかdata.d示されていないが、私はそれが配列だと仮定していますか。)?

正しいです。あなたはそれを一度行い、次にオブザーバブルを更新すると(すべてうまくいけば)DOMを更新するはずです。

+0

私の問題は、自分自身の問題がいくつかあることを実証するために私の例を見たようです。 .addressは、混乱のためにself.items - apologiesではなくdata.d.addressになければなりませんが、残念ながら問題はありません。 – JustinN

関連する問題