Шаблон, сделанный обратный вызов

Я использую вкладки 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}}); 
    } 
});

Я думаю, что функция JQuery вызывается до HTML визуализации. Пожалуйста, дайте мне знать, как это исправить.

источник

2015-11-02 Nutan Kumar Lade

попробовать 'Meteor.setTimeout' и применять через 500 миллисекунд или в конце шаблона создать помощник, который будет применять язычки – Sasikanth

это проблема с данными позади' customerClientMapping' помощник. Имейте в виду, что изначально все коллекции будут пустыми и всего лишь через секунду они будут заполнены данными с сервера. Вам нужно будет дождаться появления этих данных, прежде чем вы сможете предположить, что список не пуст. –

Вы попробовали Template.customersMapping.onRendered? http://docs.meteor.com/#/basic/Template-onRendered – mahdavipanah

Я разделился на два шаблона: один для управления подписками и другой для отображения вкладок.

В первом шаблоне (customersMapping) мы ожидаем, что подписки будут готовы.

Когда они готовы, мы можем отобразить наш второй шаблон (вкладки).

В обработанном обратном вызове шаблона tabs мы можем вызвать метод вкладок jquery ui без задержки выполнения, потому что наши данные уже переданы клиенту.

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

источник

2015-11-03 11:31:46

Прохладный. Это сработало. Спасибо @Aykut Yaman. –

У меня сейчас один вопрос. Закладки динамически не изменяются после загрузки. Также, если я удаляю все вкладки и пытаюсь динамически добавлять вкладки, также не работает. –

Шаблон, сделанный обратный вызов

ответ

Смежные вопросы