javascript - 无法使用 API 的输入替换 Handlebars 变量

Question

我正在尝试创建一个简单的天气 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();

Answer 1

我假设您希望代码在 success 处理程序中执行以下操作。

1. 更新您的全局天气对象
2. 使用该全局对象来渲染您的模板

这种情况不会发生，因为您的函数 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');