MeteorはgetJson以外のdiv呼び出しを受け付けませんか？

Question

Meteor.jsでの非常に独特の経験。

Template.mytemplate.rendered = function(){ 

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

は基本的に私は、JSONの情報を取得し、私の$('.location')のdivにそれを置くためにAPIを使用しています：私のコードはそうのようなものです。このコードは機能します。しかし、このコードはありません。

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"上に置くことができています。なぜこれが当てはまるのだろうか？

jsonのものが含まれている場合、getJSON関数の厳密な下にdiv文字列を呼び出す必要はありません。

Answer 1

場所を繰り返し要素にコピーするための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"はいくらか遅延して実行されます。だから、最後の2行が最初に実行されるのです。

また、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(); 
    } 
}); 

、今、あなたのデータは、反応的レンダリングとあなたが反応変数の値を変更することで、好きなときに、あなたはそれを変更することができます。