分享程序员开发的那些事...
更新时间：2023-10-26 11:56:46
我已分为两个模板，一个用于管理订阅，另一个用于呈现选项卡.
I have divided into two template, one for managing subscriptions, and other for rendering tabs.
在第一个模板(customersMapping)中，我们等待订阅准备就绪.
In the first template(customersMapping) we wait subscriptions to be ready.
当它们准备就绪时，我们可以渲染第二个模板(选项卡).
When they are ready we can render our second template(tabs).
在选项卡模板的onRendered回调中，我们可以调用jquery ui的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();
});
}