0

ajaxサーバーの読み取りからobservableArrayをバインドしようとしていますが、htmlにバインドできません。json データが返されますが、それを解析またはバインドする方法がわかりません。ノックアウト初心者です。

コード：

<html>
<head>
<title></title>
<script type='text/javascript'     src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>

function SurnameViewModel() {
  var self = this;
  self.Surnames = ko.observableArray();
  $.ajax({
    crossDomain: true,
    type: 'POST',
    url: "http://localhost/GetSurnames/Name/CID",
    dataType: 'json',
    data: { "Name": "d", "CID": "17" }, // <==this is just a sample data
    processdata: true,
    success: function (result) {
    self.Surnames= ko.mapping.fromJS(result.data);
    alert(self.Surnames()); // <== able to see the json data

    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Failure!");
        alert(xhr.status);
        alert(thrownError);
    }
  });
}


// Activates knockout.js
$(document).ready(function() {
  ko.applyBindings(new SurnameViewModel())
});
</script>
</head>
<body>
<h2>Surnames</h2>
<table>
    <thead><tr>
        <th>ID</th><th>Surname</th>
    </tr></thead>
        <tbody data-bind="foreach: Surnames">
        <tr>
        <td data-bind="text: Surnames().id"></td>
        <td data-bind="text: Surnames().homename"></td>

    </tr>    
</tbody>
</table>

</body>
</html>

アラートから返された Json データ

data: "[{"id":3,"homename":"DCosta"}]"

ここで何が間違っていますか？

編集：作業コード

これが私のために働いたものです。

私はこれを変更します

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

に

ko.mapping.fromJSON(result.data, {}, self.Surnames);

そしてこれからのhtmlで

<tr>
    <td data-bind="text: Surnames().id"></td>
    <td data-bind="text: Surnames().homename"></td>

</tr>

これに

<tr>
    <td data-bind="text: id"></td>
    <td data-bind="text: homename"></td>

</tr>
4

1 に答える 1

1

2 つの問題があります。

バインディングを使用するときのビューでは、配列のコンテキストの「内側」にいるため、配列名 ( ) を再度foreach書き出す必要はありません。Surnames()

<tbody data-bind="foreach: Surnames">
   <tr>
       <td data-bind="text: id"></td>
       <td data-bind="text: homename"></td>
   </tr>
</tbody>

サーバーからデータを取得するときは、Surnames配列をオーバーライドしています。マッピング プラグインを使用する正しい方法は次のとおりです。

ko.mapping.fromJS(result.data, {} /* empty mapping options */, self.Surnames);

または

self.Surnames(ko.mapping.fromJS(result.data)());

上記のコードの に注意してください。()これが必要なのは、がその基になる値を取得せずにをko.mapping.fromJS(result.data)返すためです。ko.observableArray()Surnamesko.observableArray

于 2013-07-28T12:02:56.743 に答える