2015-04-15 3 views
0

У меня есть коллекция, которая имеет свойства стиля, которые я перебирать и применить к соответствующему элементу:Метеор коллекция обновление не обновляется на клиенте

// server side 
Meteor.publish('elements', function(){ 
    return Elements.find(); 
}); 

//client side 
Meteor.subscribe("elements"); 

setupElements = function() { 
    var currentUserId = Meteor.userId(); 
    var elements = Elements.find({user: currentUserId}).fetch(); 
    elements.forEach(function(e){ 
    var elementId = e._id; 
    eval("document.getElementById('" + elementId + "').removeAttribute(\"style\")"); 
    var width = e.width; 
     for (var i in width) { 
     eval("document.getElementById('" + elementId + "').style.width"= \"" + width[i] + "\""); 
     } 
    }); 
} 

Template.element.rendered = function() { 
    if(!this._rendered) { 
    this._rendered = true; 

    // iterate through element and apply width style to each 
    setupElements(); 
    } 
} 

// template 
<template name="element"> 
    {{#each element}} 
    <div id="{{_id}}" class="element">{{text}}</div> 
    {{/each}} 
    <button id="change-style">Change style</button> 
</template> 

Шаблон делает и применяет соответствующую ширину каждого элемента. Однако, когда я запустить обновление, как показано ниже:

'click #change-style': function() { 
    Meteor.call('updateElements'); // assume server-method successfully updated all elements 
    setupElements(); // thought this will fetch new style and re-apply 
    }, 

Документы обновлены в базе данных, но шаблон/вид не реагирует на изменения, пока не обновите страницу или вызвать событие снова. Похоже, что база данных не обновляется на стороне клиента, когда сервер ее обновляет. Удовлетворение правильной настройки, чтобы сделать стиль повторного применения реактивным, или если есть способ заставить шаблон обновления.

Заранее благодарен!

+1

Wha ... Почему вы eval()? И строка eval(), кажется, уходит. Вы следуете за каким-то злым учебником? –

+0

@Poyli Имейте в виду, что javascript на клиенте асинхронен. Что происходит, так это 'setupElements' работает до выполнения задач вызова. – Akshat

+0

@Kyll, это просто моя грубая попытка выполнить итерацию каждого объекта, захватить соответствующий идентификатор и применить его свойства стиля. Нужно реорганизовать эту часть, но будет делать это отдельно. – Poyi

ответ

2

Хотя есть, вероятно, лучшие способы сделать то, что вы делаете, используя стандартный реактивный html & JQuery. В контексте вашего точного вопроса:

Javascript асинхронный. setupElements срабатывает до того, как результаты поступят с сервера. Просто запустите его в обратном вызове .call:

Meteor.call('updateElements', setupElements); 
+0

Вижу, я как-то думал, что клиент поддерживает устаревшую версию коллекции, но ее просто увольняют до того, как обновление будет готово. – Poyi

+0

И да, текущая настройка, безусловно, может быть реорганизована, я рассмотрю это отдельно. Большое спасибо! – Poyi