Question

我在代码中使用了jquery选项卡。我需要调用$（'ul.tabs'）。tabs（）;一旦HTML呈现。但这是抛出错误“类型：d [0]未定义”。使用的代码如下。

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

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

Answer 1

我分为两个模板，一个用于管理订阅，另一个用于呈现标签。

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

当它们准备就绪时，我们可以渲染我们的第二个模板（标签）。

在标签模板的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();
 });
}

模板渲染回调

1 个答案: