2013-05-05 3 views
0

У меня есть этот шаблон:Нужно ли мне перезагружать сайт в Метеор?

<template name="body"> 
    {{#if key}} 
    {{> mite}} 
    {{else}} 
    {{> settings}} 
    {{/if}} 
</template> 

и

<template name="settings"> 
    <h1>The settings</h1> 
    <form class="form-inline"> 
    <input id='apiKey' type='text' name='apiKey' placeholder='your API-Key'> 
    <button id='saveSettings' type='submit' class='btn'>save</button> 
    </form> 
</template> 

<template name="mite"> 
    <div> 
    <h3>...here with key</h3> 
    <p> 
     <a id="optout" href="#">not your key?</a> 
    </p> 
    </div> 
</template> 

Когда я показываю настройки-форму, где пользователь может установить ключ, необходимый для отображения «клеща» шаблона. Теперь, когда я «отправлю» форму, страница будет перезагружена, и будет показан шаблон «клещ».

На шаблоне клеща я бы хотел, чтобы эта ссылка не была вашим ключом? или что-то, что удаляет ключ, а затем снова отображает форму настроек. Он работает с перезагрузкой ... но не могу ли я сделать это без всякой перезагрузки в Метеор? Как я могу «вызвать» часть шаблона с #if в шаблоне тела?

- Ренато

ответ

1

Вы должны привязать обработчик событий к вашей форме и использовать preventDefault(), чтобы остановить его подачи. например

стороне клиента JS

Template.settings.events({ 
    'submit':function(event,template) { 
     event.preventDefault(); 
     var apiKey = template.find('input[name=apiKey]').value; 

     //..rest of logic to handle submit event 
     Session.set("key",true); 
    } 
}); 

Вы можете использовать вспомогательный шаблон с Session.get("showthistemplate"), чтобы решить, следует ли показать другой шаблон или нет: (это универсальный помощник, так как вы кладете его и не шаблон:

Handlebars.registerHelper('key',function() { 
    return Session.set("key",true); 
}); 
+0

но сайт все еще нуждается в перезагрузке, верно то, что я пытаюсь сделать, это то, что шаблон «клещ» визуализируется как только ключ установлен ... – renato

+1

Нееет, шаблон система является «реактивной» с ПНП. Поэтому, как только «Session.set (« ключ »,« истина ») установлен или изменен, Meteor автоматически исправляет DOM с обновлением без необходимости перезагрузки. Это действительно здорово! – Akshat

+0

Ах! Сессия ... вот и все. 'Template.body.key = -> Session.get 'key'' работает, но' Template.body.key = -> localStorage [' key '] 'не сделал. Спасибо! – renato

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