模板渲染回调

Question

我在我的代码中使用 jquery 选项卡。我需要调用 $('ul.tabs').tabs();渲染 HTML 之后。但这是抛出错误 "Type : d[0] is undefined"。使用的代码如下。

<template name="customersMapping">
    <div class="col s9 blue-grey lighten-5" id="side-right">
               <div class="row">
                    <div class="col s12"> 
                      <ul class="tabs" id="usersMappingTab">
                       {{#each customerClientMapping}}
                          <li class="tab col s2"><a href="#{{_id}}_Tab">{{name}}</a></li>
                       {{/each}}
                      </ul>
                    </div>
                    {{#each customerClientMapping}}
                        <div id="{{_id}}_Tab" class="col s12">
                            {{#each userChats ..}}
                                <div>{{name}}: {{message}}</div>
                            {{/each}}
                        </div>
                    {{/each}}
              </div>
           </div>

在client.js

Template.customersMapping.rendered = function() {
    if ($('#usersMappingTab').length > 0) {
                $('ul.tabs').tabs();
    }
};

Template.customersMapping.helpers({
    'customerClientMapping' : function() {
        return UserChatsMapping.find({cid : Meteor.userId()}, {sort: {time: -1}});
    },
    'userChats' : function() {
        return Messages.find({uid:this.uid}, {sort:{time: -1}});
    }
});

我认为 jquery 函数在呈现 HTML 之前被调用。请让我知道如何解决这个问题。

Answer 1

我分为两个模板，一个用于管理订阅，另一个用于呈现选项卡。

在第一个模板 (customersMapping) 中，我们等待订阅准备就绪。

准备就绪后，我们可以呈现第二个模板（选项卡）。

在tabs模板的onRendered回调中，我们可以调用jquery ui的tabs方法，不会延迟执行，因为我们的数据已经传输到客户端了。

<head></head>

<body>
  {{> customersMapping}}
</body>

<template name="customersMapping">
    {{#if Template.subscriptionsReady}}
        {{> tabs}}
    {{else}}
        loading...
    {{/if}}
</template>

<template name="tabs">
   <div id="tabs">
       <ul>
       {{#each customerClientMapping}}
           <li><a href="#{{_id}}_Tab">{{name}}</a></li>
       {{/each}}
       </ul>
       {{#each customerClientMapping}}
           <div id="{{_id}}_Tab" class="col s12">
           <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
          </div>
      {{/each}}
 </div>

UserChatsMapping = new Mongo.Collection("userChatsMapping");

if (Meteor.isClient) {

  Template.customersMapping.onCreated(function() {          
      this.subscribe("userChatsMapping");
  });

  Template.tabs.helpers({
     customerClientMapping: function () {
         return UserChatsMapping.find().fetch();
     }
  });

  Template.tabs.onRendered(function() {
      $( "#tabs" ).tabs();
  });
}


// SERVER
if (Meteor.isServer) {
    Meteor.startup(function () {
    // put random data into collection
        if (UserChatsMapping.find().count() === 0) {
            _.each(_.range(10), function() {
                UserChatsMapping.insert({
                    name: faker.name.findName()
                });
            });
        }
 });

 Meteor.publish("userChatsMapping", function() {
     // simulate some delay
     Meteor._sleepForMs(2000);
     return UserChatsMapping.find();
 });
}

模板渲染回调

Template rendered callback

javascript

jquery

jquery-tabs

meteor

meteor-blaze