0

Web アプリ用の通貨モジュールの作成に忙しくしています。Yahoo Finance API を使用して、ローカル DB で定義した 2 つの通貨の通貨換算レートを返しています。ko.computed を使用して、Finance API から受け取った JSON データを既存のビューモデルにバインドしたいだけです。これを達成するために ko.computed を使用する必要があるかどうかはわかりません。そのため、アドバイスがあれば非常に役立ちます。

これが私のコードです：

    var currency = function (data) {
        var self = this;
        self.CurrencyFrom = ko.observable(data.CurrencyFrom);
        self.CurrencyTo = ko.observable(data.CurrencyTo);
        self.ConversionRate = ko.computed(rates); // I WANT TO BIND THE VALUE FROM API HERE
    }

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

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

        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) {
                var MappedCurrencies =
              $.map(Result.d,
       function (item) {
           getRate(item.CurrencyFrom, item.CurrencyTo);

           return new currency(item);
       }
       );
                self.Currencies(MappedCurrencies);

            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    };

    //3rd Party JSON result from Yahoo Finance API
    function getRate(from, to) {
        var script = document.createElement('script');
        script.setAttribute('src', "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D" + from + to + "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&callback=rates"); //HERE I CALL THE VALUE TO OBTAIN THE CONVERSION RATE FROM API
        document.body.appendChild(script);
    }


    //I WANT TO ADD THIS TO MY VIEWMODEL
    var rates = function parseExchangeRate(YahooData) {
                var rate = YahooData.query.results.row.rate;
        }


    $(document).ready(function () {
        var VM = new CurrencyModel();
        ko.applyBindings(VM);
        $('[rel=tooltip]').tooltip();
    })

parseExchangeRate 関数から返された JSON (Yahoo クエリ結果):

parseExchangeRate({"query":{"count":1,"created":"2013-01-18T06:46:41Z","lang":"en-US","results":{"row":{"rate":"0.1129","name":"ZAR to USD"}}}});
4

1 に答える 1

1

すでに jquery を使用されているようですので、JSONP にも jquery を使用します。変換率には単純な ko.observable を使用し、ajax リクエストを実行して observable を非同期に更新する「裸の」 ko.computed を追加しました。さらに説明が必要な場合はお知らせください。

JSFiddle の例 (最初の ajax の代わりにモック データを使用): http://jsfiddle.net/VsW5H/1/

更新されたコード:

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

  ko.computed(function () {
    var from = self.CurrencyFrom(),
      to = self.CurrencyTo();

    if (!from || !to) {
      self.ConversionRate("N/A");
      return;
    }

    getRate(from, to).done(function (YahooData) {
      console.log("got yahoo data for [" + from + "," + to + "]: ", YahooData);
      self.ConversionRate(YahooData.query.results.row.rate);
    });
  });
}

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

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

  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) {
      var MappedCurrencies = $.map(Result.d,

      function (item) {
        return new currency(item);
      });
      self.Currencies(MappedCurrencies);
    },
    error: function (xhr, status) {
      alert(status + " - " + xhr.responseText);
    }
  });

};

//3rd Party JSON result from Yahoo Finance API
function getRate(from, to) {
  return $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D" + from + to + "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&callback=?");
}
于 2013-01-19T15:46:47.350 に答える