Template rendered callback

I'm using jquery tabs in my code. I need to call $('ul.tabs').tabs(); after once the HTML is rendered. But this is throwing error "Type : d[0] is undefined". The code which is used is below.

<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>

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

I think the jquery function is called before the HTML is rendered. Please let me know how to fix this.

标签： javascript jquery meteor meteor-blaze jquery-tabs

1条回答

趁早两清

2楼-- · 2019-09-09 10:00

I have divided into two template, one for managing subscriptions, and other for rendering tabs.

In the first template(customersMapping) we wait subscriptions to be ready.

When they are ready we can render our second template(tabs).

In tabs template's onRendered callback we can call jquery ui's tabs method without delaying the execution, because our data is already transferred to the client.

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

0人赞添加讨论(0) 举报

Template rendered callback

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间