Question

我正在尝试获取一些json数据，并使用日期填充选择下拉列表以选择结果。如果我直接在localhost：3000 /结果加载页面，则填充选择下拉列表，我可以选择一个日期来接收正确的警报，因此在某些方面，此代码有效。但我使用的是铁：路由器，当我点击结果导航链接在我的布局中渲染模板时，数据没有被加载。我做错了什么？

RESULTS.JS ______________________________________________________________________

Meteor.http.call("GET", "http://data.ny.gov/resource/d6yy-54nr.json", function (err, result){
var my_json = JSON.parse(result.content);
 console.log(my_json);

var html = "<option value='' disabled default>Select a date</option>";
var showData = my_json;
//iterate over each lottery drawing and add it to the select.
//The date will be displayed, the index of the array element will be the value.
showData.forEach(function(element, index){
   var date = new Date(element.draw_date);
   html += "<option value='"+index+"'>"+ (parseInt(date.getMonth())+1) + "/" + date.getDate() + "/" + date.getFullYear()+ "</option>";

});

//insert the option into the select.
document.getElementById("selectDate").insertAdjacentHTML("beforeend", html);
//add an onchange event handler to the select.
document.getElementById("selectDate").addEventListener("change", displayWinningNumbers, false);

function displayWinningNumbers(e)
{
  //when a option is selected, test the value. If 0 or higher return the array entry with the winning numbers.
  if(e.target.value >= 0)
  {
     alert(showData[e.target.value].winning_numbers); 
  }
}
});

Answer 1

通过执行以下操作解决了这个问题：

RESULTS.JS ____________________________________________________

Template.results.helpers({
  results: function () {
    return Session.get('lottery-results');
  },
  winning: function() {
    return Session.get('winning')
  }
});

Template.results.rendered = function(){
  Session.set('lottery-results', []);
  HTTP.get("http://data.ny.gov/resource/d6yy-54nr.json", function (err, result) {
    Session.set('lottery-results', JSON.parse(result.content) );
  });
};

Template.results.events({
  'change #date': function (e, tmpl) {
    Session.set('winning', $('#date option:selected').data('winning'))
  }
});

Template.results.destroyed = function(){
 Session.set('winning', []);
};

RESULTS.HTML ____________________________________________________

<template name="results">
<select id="date">
<option>Select a date</option>
{{#each results}}
<option data-winning="{{ winning_numbers }}">{{dateFormat draw_date  format="MM/DD/YYYY"}}</option>
{{/each}}
</select>
<h1>{{ winning }}</h1>
</template>

Meteor Iron：路由器数据未加载

1 个答案: