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？请帮我？否则，可以在Meteor中使用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');
  }
});

到目前为止，我不确定这对你有用吗。如果您想加载更多数据，则只需使用新内容设置Session变量。

在按钮上设置eventHandler：

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);     
  }
});

这只是一个小例子。尽管我会注意保存会话变量中的所有数据。也许客户端集合更好。阅读文档中的更多内容。

如何在流星中传递数据和附加模板？

1 个答案: