2

AJAXJSONエントリからKnockoutJSビューモデルを更新したい。これを行う方法がわかりません。

これが私のコードです：

 var CurrencyModel = function (Currencies) {
        var self = this;
        self.Currencies = ko.observableArray(Currencies);

        self.AddCurrency = function () {
            self.Currencies.push({
                CurrencyFrom: "",
                CurrencyTo: ""
            });
        };

        self.RemoveCurrency = function (Currency) {
            self.Currencies.remove(Currency);
        };

        self.Save = function (Form) {
            alert("Could Now Save: " + ko.utils.stringifyJson(self.Currencies));
        };

        $.ajax({
            url: "CurrencyConfiguration.aspx/GetConfiguredCurrencies",
            // Current Page, Method  
            data: '{}',
            // parameter map as JSON  
            type: "POST",
            // data has to be POSTed  
            contentType: "application/json; charset=utf-8",
            // posting JSON content      
            dataType: "JSON",
            // type of data is JSON (must be upper case!)  
            timeout: 10000,
            // AJAX timeout  
            success: function (Result) {
                //Need to Get method to Bind To CurrencyModel;
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    };

    $(document).ready(function () {
        var VM = new CurrencyModel();
        ko.applyBindings(VM);
    })

サーバーから取得したJSONデータは次のとおりです。

{
"d": [
    {
        "__type": "Finance.Tracntrace.Members_Only.DAL.DataModel.Currency.CurrencyConfigurationDM",
        "CurrencyFrom": "ZAR",
        "CurrencyTo": "USD"
    },
    {
        "__type": "Finance.Tracntrace.Members_Only.DAL.DataModel.Currency.CurrencyConfigurationDM",
        "CurrencyFrom": "USD",
        "CurrencyTo": "ZAR"
    }
]
}

HTML：

  <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        Currency From
                    </th>
                    <th>
                        Currency To
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Currencies">
                <tr>
                    <td data-bind="text: CurrencyFrom">
                    </td>
                     <td data-bind="text: CurrencyTo">
                    </td>
                </tr>
            </tbody>
        </table>

ビューモデルは非常にシンプルで、通貨Fromと、テーブルに追加およびテーブルから削除したい通貨があります。

4

2 に答える 2

2

ここで2つのことをします。

まず、Currencyのクラスを定義します。

var currency = function(data) {
  var self = this;
  self.CurrencyFrom = ko.observable(data.CurrencyFrom);
  self.CurrencyTo = ko.observable(data.CurrencyTo);
}

その後、成功の方法は次のようになります。

success: function(Result) {
   // use jQuery's $.map function to translate values
   // should be stored in .d property, according to your JSON
   var mappedCurrencies = 
     $.map(Result.d, 
           // Here, $.map will just new up a new currency,
           // using the constructor argument to set fields
           function(item){ return new currency(item);});

   // Finally, set the currencies.  VM should update automatically.
   self.Currencies(mappedCurrencies);
}
于 2013-01-16T12:57:23.323 に答える
0

ビューモデルとデータコンテキストを分離することをお勧めします。ajaxリクエスト用のクラスを用意することをお勧めします

配列「self.Currencies」をサービスから受信したデータにバインドする必要があると思います。したがって、これは成功関数でのみ行う必要があります。

       success: function (Result) {
            ko.utils.arrayPushAll(self.Currencies, Result);
        }
于 2013-01-16T13:03:37.757 に答える