无法用来自 API 的输入替换 handlebars 变量

Question

我正在尝试创建一个简单的天气 API，用链接到 api 的城市名称的用户输入替换车把占位符变量。它工作起来很奇怪，它会在下一次输入提交后显示正确的数据。 IE。我提交 "Dayton" 并且占位符数据再次显示，然后我提交 "New York" 并且 Dayton 的正确信息弹出。如果我要提交第三个城市，纽约会显示。关于为什么的任何想法？这是我的代码：

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 处理程序中执行以下操作。

更新您的全球天气对象
使用该全局对象呈现您的模板

这不会发生，因为您的函数 addCurrentWeather 基本上什么都不做，因为它更新局部变量并丢弃它。

因此请确保此函数改为更新全局变量。

var addCurrentWeather = function(data) {
    currentWeather = {
        cityName: data.name,
        temperature: data.main.temp,
        description: data.weather[0].main
    }
};

然后在 success 处理程序中你应该只有

addCurrentWeather(data);
renderCurrentWeather();

它现在以这种方式工作的原因是因为在调用渲染函数之后，您稍后会直接更新全局变量，因此为什么会在下一次 api 获取时使用此数据。

作为一个建议，尽量避免使用全局变量，因为这样很容易产生错误。相反，请尝试使用纯函数，因为如果您开始对代码进行单元测试，它也会有所帮助。

在你的例子中有 addCurrentWeather 函数接受数据和 return 天气对象。并且类似地让 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');

无法用来自 API 的输入替换 handlebars 变量

Trouble replacing handlebars variable with input from API

javascript

api

handlebars.js