Question

Meteor.js非常奇特的经历。我的代码是这样的：

Template.mytemplate.rendered = function(){

$.getJSON('http://ip-api.com/json/?callback=?', function(lingo){
$('.location').text(" " + lingo.zip + ", " + lingo.city);
});
};

基本上我使用API来获取JSON信息并将其放入我的$('.location') div中。这段代码有效。但是，这段代码不是什么。

var tree = $('.location').text();
$('.repeat').text(tree);

具体来说，当我将此代码放在getJSON函数之外时，它不起作用。这样做......

Template.mytemplate.rendered = function(){

$.getJSON('http://ip-api.com/json/?callback=?', function(lingo){
$('.location').text(" " + lingo.zip + ", " + lingo.city);
});


var tree = $('.location').text();
$('.repeat').text(tree);
};

以空div class="repeat"结尾。但是，如果我重新格式化......

Template.mytemplate.rendered = function(){

$.getJSON('http://ip-api.com/json/?callback=?', function(lingo){
$('.location').text(" " + lingo.zip + ", " + lingo.city);

var tree = $('.location').text();
$('.repeat').text(tree);

});
};

然后突然我能够检索div class="location"的属性并将其放在我的div class="repeat"上。我想知道为什么会这样。

我不想在getJSON函数包含json内容时严格地调用我的div字符串。

Answer 1

用于将位置复制到repeat元素的jQuery代码将在初始化'.location'元素之前执行。

//rendered is old API.
Template.mytemplate.onRendered(function(){

$.getJSON('http://ip-api.com/json/?callback=?', function resultFn(lingo){
  //2. after some time this code will be executed
  $('.location').text(" " + lingo.zip + ", " + lingo.city);
});

  //1. code below will be executed first
  var tree = $('.location').text();
  $('.repeat').text(tree);
});

为什么呢？ “getJSON”调用需要一些时间执行，因为它通过网络上传一些外部数据。因此，您的回调“resultFn”将执行一些延迟。这就是为什么首先执行最后两行。

另外，使用jquery将数据放入模板不是真正的流星方式。我能想到的解决方案是：

<template name="myTemplate">
  <div class="location">
  {{location}}
  </div>

  <div class="repeat">
  {{location}}
  </div>
</template>

逻辑：

Template.myTemplate.onCreated(function(){
     this.location = new ReactiveVar(); //reactive-var package
     var self = this;
     $.getJSON('http://ip-api.com/json/?callback=?', function(lingo) {
        self.location.set(lingo.zip + ", " + lingo.city);
     });
});

Template.myTemplate.helpers({
  location: function(){
    return Template.instance().location.get();
  }
});

因此，现在您的数据会被动地呈现，您可以随时通过更改反应变量的值来更改它。

Meteor不接受getJson之外的div调用？

1 个答案: