我正在尝试创建一个简单的天气 API,它将 Handlebars 占位符变量替换为链接到 API 的城市名称的用户输入。它的工作方式很奇怪,它会在提交下一个输入后显示正确的数据。 IE。我提交“代顿”,占位符数据再次显示,然后我提交“纽约”,弹出代顿的正确信息。如果我要提交第三个城市,则会显示纽约。有什么想法吗?这是我的代码:
var currentWeather = {
cityName: "London",
temperature: 86,
description: 'cloudy'
};
var addCurrentWeather = function(data) {
var weather = {
cityName: data.name,
temperature: data.main.temp,
description: data.weather[0].main
}
};
var renderCurrentWeather = function () {
var weather= currentWeather;
var source = $('#weather-template').html();
var template = Handlebars.compile(source)
var weatherHTML = template(currentWeather);
$('#city').append(weatherHTML);
};
// fetch applying user input to grab data from api
var fetchCurrentWeather = function (query) {
$.ajax({
method: "GET",
url: "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&APPID=MYKEY",
dataType: "json",
success: function (data) {
addCurrentWeather(data);
renderCurrentWeather();
currentWeather = {
cityName: data.name,
temperature: data.main.temp,
description: data.weather[0].main
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus);
}
});
};
$('#search').on('click', function () {
var search = $('#search-query').val();
console.log(search);
fetchCurrentWeather(search);
});
renderCurrentWeather();
最佳答案
我假设您希望代码在 success
处理程序中执行以下操作。
- 更新您的全局天气对象
- 使用该全局对象来渲染您的模板
这种情况不会发生,因为您的函数 addCurrentWeather
在更新局部变量并将其丢弃时基本上不执行任何操作。
因此请确保此函数更新全局变量。
var addCurrentWeather = function(data) {
currentWeather = {
cityName: data.name,
temperature: data.main.temp,
description: data.weather[0].main
}
};
并且在 success
处理程序中,您应该只有那时
addCurrentWeather(data);
renderCurrentWeather();
它目前以这种方式工作的原因是,在调用渲染函数后,您稍后会直接更新全局变量,因此为什么会在下一次 api 获取时使用此数据。
<小时/>建议,尽量避免使用全局变量,因为很容易产生这样的错误。相反,请尝试使用纯函数,因为如果您开始对代码进行单元测试,它也会有所帮助。
在您的情况下,有 addCurrentWeather
函数接受数据并返回
天气对象。同样,让 render 方法接受天气对象,而不是从全局变量中读取它。
类似这样的事情
function getCurrentWeather(data) {
return {
cityName: data.name,
temperature: data.main.temp,
description: data.weather[0].main
}
};
function renderCurrentWeather(weather) {
var source = $('#weather-template').html();
var template = Handlebars.compile(source)
var weatherHTML = template(currentWeather);
$('#city').append(weatherHTML);
};
function fetchCurrentWeather(query) {
$.ajax({
method: "GET",
url: "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&APPID=MYKEY",
dataType: "json",
success: function (data) {
const weather = getCurrentWeather(data);
renderCurrentWeather(weather);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus);
}
});
};
$('#search').on('click', function () {
var search = $('#search-query').val();
console.log(search);
fetchCurrentWeather(search);
});
fetchCurrentWeather('London');
关于javascript - 无法使用 API 的输入替换 Handlebars 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58253710/