如何传递数据并在流星中追加模板？

Question

我的模板：

<div class="container"> 
     {{>sideBar}} 
     {{>gamesContent}} 
</div> 


<template name="gamesContent"> 
     <div class="listGames"> 
      <div class="row" id="list_game"> 
       {{#each games}} 
        {{>gameInfo}} 
       {{/each}} 
       <!--/games--> 

       </div> 
     </div> 
</template> 

    // On server 
Meteor.methods({ 
getListGame: function (params) { 
    this.unblock(); 
    var games = HTTP.call("GET",urlAPI,{params:params}); 
    return games.data; 
} 
}); 

// On client 
Template.gamesContent.games = function() { 
return Session.get('games'); 
} 

Meteor.call("getListGame", {order: "hot", store:"ios", limit:'24' }, function (error, result) { 
     if(result.status) { 
      Session.set('games', result.data.games); 
      Session.set('cursor', result.data.cursor); 
     } 

}); 

Template.games.events = { 
'click #show_mores': function(){ 

var cursor = Session.get('cursor'); 
    Meteor.call("getListGame", {order: "hot", store:"ios", limit:24, cursor:cursor },  function (error, result) { 
      if(result.status) { 
       var gameMores = result.data.games; 
       console.log(gameMores); 
      // i want to append more games here 
      } 
     }); 
    } 
} 

我想点击#show_more，它将得到的数据和追加#list_game。如何获取模板并传递数据，然后添加list_game？请帮帮我？ 否则，可以在流星中使用scoll jquery？

Answer 1

我为你做了一个很小的例子。我希望我赶上你的问题。

//Container for gamesContent, just for a better look behavior 
<template name="gamesContentContainer"> 
    <div class="container"> 
    //I removed your sidebar 
    {{> gamesContent}} 
    </div> 
</template> 


//Your gamesContent template 
<template name="gamesContent"> 
    <div class="listGames"> 
    <div class="row" id="list_game"> 
     {{#each games}} 
     {{> gameInfo}} 
     {{/each}} 
    </div> 
    <button id="loadmore"></button> 
    </div> 
</template> 

//GameInfo template for every game  
<template name="gameInfo"> 
    <div> 
    {{type}} 
    </div> 
</template> 

当您的gameContent模板呈现时，您应该从服务器获取数据并将其传递到您的模板。为了更容易，我拿了一些示例数据。您从服务器（Meteor.call）收到的数据应该如下所示。

Template.gamesContent.rendered = function() { 

    var data = [{'type' : 'JumpnRun', 'year' : 1990}, {'type' : 'Shooter', 'year' : 2005}, {'type' : 'Simulation', 'year' : 1992}]; 

    //Now we have to save the data into a session variable. 
    //Every times this sessionvariabale is changed, all dependencies will change. 
    Session.set('games', data); 
} 

//Now we have to put this data into our template. 
Template.gamesContent.helpers({ 
    games: function() { 
    return Session.get('games'); 
    } 
}); 

我不知道这是否为你工作直到现在。 如果你想加载更多的数据，你只需要设置新的内容会话变量。

设置按钮的事件处理程序：

Template.gamesContent.events({ 
    'click #loadmore': function() { 
    var data = [{'type' : 'JumpnRun', 'year' : 1990}, {'type' : 'Shooter', 'year' : 2005}, {'type' : 'Simulation', 'year' : 1992}, {'type' : 'JumpnRun', 'year' : 1990}, {'type' : 'Shooter', 'year' : 2005}, {'type' : 'Simulation', 'year' : 1992}]; 

    Session.set('games', data);  
    } 
}); 

这只是一个小例子。尽管我会小心保存会话变量中的所有数据。也许客户收藏比较好。在文档中阅读更多信息。