我想使用 Knockout 数据绑定来更新我的 html div 元素中的天气 API 数据。目前,我使用 jQuery 来更新 DOM,但我更喜欢使用 Knockout。我还想动态更改位置 zip,以便天气特定于我 div 中的那个位置。我有一个位置数组。
这是我的代码: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
ako.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] 删除。
我来说两句