Как правильно обрабатывать дом для Meteor

В настоящее время я использую железо-маршрутизатор, и это моя первая попытка опробовать платформу Meteor. У меня возникли проблемы, когда большинство библиотек jquery не удалось инициализировать должным образом, потому что способ, которым Meteor отображает html, $(document).ready(), срабатывает перед тем, как будут отображены любые шаблоны. Мне интересно, есть ли какие-либо обратные вызовы от Meteor/iron-router, которые позволяют мне заменить готовый jQuery?

Кроме того, как я должен (легко и правильно) обрабатывать текущее обновление элементов dom, если некоторые из них настраиваются jQuery/javascript?

Это то, что я сейчас делаю, я чувствую, что он очень хакерский и, вероятно, столкнется с проблемами, если элементы будут обновлены после инициализации.

var jsInitalized = false;

Router.map(function () {
  this.route('', {
    path: '/',
    layoutTemplate: 'default',
    after: function(){
      if(!jsInitalized){
        setTimeout(function(){
          $(document).ready( function() { $$$(); });
        }, 0);
        jsInitalized = true;
      }
    }
  });
}

Ответы

Ответ 1

С помощью Meteor вы обычно хотите думать о том, когда шаблон готов, а не когда dom готов.

Например, скажем, вы хотите использовать плагин jQuery DataTables для добавления сортировки в элемент таблицы, созданный шаблоном. Вы будете слушать событие, созданное шаблоном, и привязать плагин к dom:

HTML:

<template name="data_table">
  <table class="table table-striped" id="tblData">
  </table>
</template>

JavaScript:

Template.data_table.rendered = function () {
  $('#tblData').dataTable();
};

Теперь в любое время, когда шаблон повторно отображается (например, если данные изменяются), ваш обработчик будет вызван, и вы можете снова привязать плагин jQuery к dom.

Это общий подход. Полный пример (включающий заполнение таблицы строками) см. В этом .

Ответ 2

Попробуйте сделать отдельный .js файл, назовите его rendered.js, если хотите. и затем;

Template.layout.rendered = function ()
{
    $(document).ready(function(){console.log('ready')});
}

Я использую шаблон, но вы можете сделать Template.default.rendered. Надеюсь, что это поможет.

Также взгляните на эту часть документации, особенно на Template.events; http://docs.meteor.com/#templates_api

Ответ 3

Я использую Meteor v0.8.0 с Iron Router (под Windows 7), и вот как я обрабатываю "DOM ready":

Когда я хочу изменить DOM после отображения определенного шаблона:

Я использую Template.myTemplateName.rendered на стороне клиента:

Template.blog.rendered = function()
{
    $('#addPost').click(function() 
    { 
        ...
    });
}

Когда я хочу изменить DOM после создания любого нового пути:

Я использую Router.onAfterAction, но, похоже, есть трюк:

Router.onAfterAction(function()
{
    setTimeout(function() 
    {
        $('.clickable').click(function() 
        { 
            ...
        });
    }, 0);
});

Обратите внимание на setTimeout(..., 0), это не работает для меня иначе (DOM пуст).

Обратите внимание, что вы можете использовать onAfterAction по определенному пути, но большую часть времени я думаю, что он избыточен с помощью метода Template.myTemplateName.rendered выше.

Что, кажется, отсутствует:

Способ изменения DOM после создания любого шаблона.