jQueryデータ処理をopenWeatherAPIのノックアウトバインディングに変更するにはどうすればよいですか？

debugcn 投稿 Dev

レッセン

Knockoutデータバインディングを使用して、htmldiv要素の天気APIデータを更新したいと思います。現在、jQueryを使用してDOMを更新していますが、Knockoutを使用することを好みます。また、場所のzipを動的に変更して、天気がdiv内のその1つの場所に固有になるようにします。場所の配列があります。

これが私のコードです：html：

var zip = locations[0].zipcode;
var myOpenWeatherAPIKey = 'xxxxxxxxxxxxxxxxxxxx';
var openWeatherMapUrl = "http://api.openweathermap.org/data/2.5/weather?zip=" + zip + ",us&APPID=" + myOpenWeatherAPIKey + "&units=imperial";
console.log(zip);
//using JSON method for retrieving API data
$.getJSON(openWeatherMapUrl, function(data) {
    var parameters = $(".weather-data ul");
    var iconCode = data.weather[0].icon;
    var iconDescription = data.weather[0].main;
    var iconUrl = "http://openweathermap.org/img/w/" + iconCode + ".png";
    detail = data.main;
    windspd = data.wind;
    parameters.append('<li>Temp: ' + Math.round(detail.temp) + '° F <br></li>');
    parameters.append('<li><img style="width: 25px" src="' + iconUrl + '">  ' + iconDescription + '</li>');
}).fail(weatherError = function(e) {
    $(".weather-data").append("OpenWeatherAPI is unable to load!");
});

<div id="open-weather" class="open-weather">
    <div id="weather-data" class="weather-data">
        <p>  <br> Current Weather</p>
        <ul id="weather-items" class="weather-items">
        </ul>
    </div>
</div>

ありがとう、

ジョーウィルソン

カスタムKOバインディングまたはカスタムKOコンポーネントを記述して、マークアップ、APIキー、jQuery、およびXHR呼び出しをカプセル化できます。

コードとユースケースを使用すると、コンポーネントは適切に聞こえます。次に、消費するマークアップは次のようになります。

<weather params="zip: myZipCode"></weather>

消費ページのビューモデルのどこにmyZipCodeありko.observableますか。

アップデート1

KOコンポーネント内にカプセル化するためのラフコードを追加しました。

アップデート2

jquery DOM参照をKOコンポーネントコードから移動し、コンポーネントテンプレートがKOバインディングを使用するようにしました。完全な例を示すために、消費ページビューモデルを追加しました。

function openWeatherComponentViewModel(params) {
  var self = this;
  
  self.zip = ko.observable(ko.unwrap(params.zip));
  self.temperature = ko.observable();
  self.iconCode = ko.observable();
  self.iconUrl = ko.pureComputed(function() {
    return "http://openweathermap.org/img/w/" + self.iconCode() + ".png";
  });
  self.iconDescription = ko.observable();
  self.hasWeather = ko.observable(false);
  self.errorMessage = ko.observable();
  
  var apiKey = 'xxxxxxxxxxxxxxxxxxxx';
  var url = "https://api.openweathermap.org/data/2.5/weather?zip=" + self.zip() + ",us&APPID=" + apiKey + "&units=imperial";  
  $.getJSON(url, function(data) {
    self.temperature(Math.round(data.main.temp));
    self.iconCode(data.weather[0].icon);
    self.iconDescription(data.weather[0].main);
    self.hasWeather(true);
  }).fail(function(error) {
    self.hasWeather(false);
    self.errorMessage("OpenWeatherAPI is unable to load! " + error.responseJSON.message);
  });
}

ko.components.register('weather-component', {
  viewModel: openWeatherComponentViewModel,
  template: `<div id="open-weather" class="open-weather">
                <div id="weather-data" class="weather-data" data-bind="if: hasWeather()">
                    <p>Current Weather for Zip Code <span data-bind="text: zip"></span></p>
                    <ul id="weather-items" class="weather-items">
                      <li>Temp: <span data-bind="text: temperature"></span>° F</li>
                      <li><img style="width: 25px" data-bind="attr: { src: iconUrl }"><span data-bind="text: iconDescription"></span></img></li>
                    </ul>
                </div>
                <div id="weather-data" class="weather-data" data-bind="if: !hasWeather()">
                    <span data-bind="text: errorMessage"></span>
                <div>
            </div>`
});

function myConsumingPageViewModel() {
  var self = this;
  self.myZipCode = ko.observable("80130");
}

var vm = new myConsumingPageViewModel();

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<weather-component params="zip: myZipCode"></weather-component>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]