0

顧客の名前と画像を表示するためだけに、単純なリストにバインドしようとしている Web サービスから次の JSON が返されます。

{"Customers":{"data":[{"CustomerID":1,"CustomerName":"Jones","CustomerImage":"~/Images/Customers/Jones02.gif","CustomerEnabled":true},{"CustomerID":7,"CustomerName":"Hughes","CustomerImage":"~/Images/Customers/Hughes057847.gif","CustomerEnabled":true},{"CustomerID":13,"CustomerName":"Michaels","CustomerImage":"~/Images/Customers/M12012.gif","CustomerEnabled":true},{"CustomerID":123,"CustomerName":"Bernard","CustomerImage":"~/Images/Customers/kb040412.gif","CustomerEnabled":true}]}}

私のマークアップには

<section id="CustomerList">
    <ul data-bind: 'foreach: data'>
        Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

        <li>
            <span data-bind="text:CustomerID"></span>
        </li>
    </ul>
</section>

しかし、ノックアウトのデータバインディングを介してIDを書き出すことはできません。

このプロセスを実行するための私の JS は次のとおりです。

var ViewModel = {
    Customer: []
};
dataService.getCustomers(function (data) {
    ViewModel.Customer = data.Customers;
    ko.applyBindings(ViewModel);
});

getCustomers() コールバックにステップ インして、JSON が上記のように戻ってくることを検証できます。また、ViewModel.Customer にクエリを実行して、割り当てられたデータを確認することもできますが、何も書き出されません。これは些細なことだと思いましたが、これまでのところ何も機能していません。

何か案は？

ありがとう

4

3 に答える 3

2

の：

<section id="CustomerList">
    <ul data-bind: 'foreach: data'>
        Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

        <li>
            <span data-bind="text:CustomerID"></span>
        </li>
    </ul>
</section>

変化する：

<ul data-bind: 'foreach: data'>

に：

<ul data-bind: 'foreach: Customer>

そして：

dataService.getCustomers(function (data) {
    ViewModel.Customer = data.Customers;
    ko.applyBindings(ViewModel);
});

変化する：

ViewModel.Customer = data.Customers;

に：

ViewModel.Customer = data.Customers.data;

<ul>最後に、マークアップが無効になるため、内からデータを含むデバッグ行を削除する必要があります。

作業サンプルはhttp://jsfiddle.net/unklefolk/35eQQ/2/で見ることができます

于 2012-04-05T11:38:20.770 に答える
0

たぶん、バインディングは次のようになります。

<ul data-bind="foreach: Customer.data">
    Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

    <li>
        <span data-bind="text: CustomerID"></span>
    </li>
</ul>

ビューモデルの唯一のバインド可能なプロパティはですCustomer。

それが機能する場合でも、双方向バインディングも有効にできるように、顧客に監視可能な配列を導入することをお勧めします。次に、フィルタリングなどを使用することもできます。次のように、監視可能な配列を埋めるだけです。

dataService.getCustomers(function (data) {
   ViewModel.MyCustomerObservableArray(data.Customers.data);
   ko.applyBindings(ViewModel);
});
于 2012-04-05T11:32:59.650 に答える
0

あなたのコードはあまり明確ではありません..あなたがしていることを正確に投稿できますか?...いくつかあります

  1. 顧客プロパティは oberservablearray である必要があります
  2. また、最初に ko.mapping.fromJSON(serverdata, MappingOptions, viewModel) を使用して json を JS オブジェクトに変換する必要があります。その後、その場で文字列化する必要はありません。
  3. サーバー データは、viewmodel プロパティに適切にマップする必要があります。配列内のオブジェクトにはいくつかのキーがありますが、ビューでは残りの「キー」プロパティについて言及していません。そのためには、 knockoutjs を使用する必要がありますignore。

Knockout の Web サイトでマッピングの仕組みを確認できます

于 2012-04-06T02:06:43.290 に答える