Как можно использовать шаблоны Meteor с библиотекой bootboxjs?
т.е. у меня есть следующий шаблон
test.html:
<template name="test">
<input type="text" name="testtext"/>
</template>
у него есть некоторые события,
test.js:
Template.test.events({
'keyup input[name="testtext"]' : function () { console.log('key up in testtext'); }
});
Как вы можете использовать шаблон для создания модального загрузочного окна с событиями?
Вы можете передать Blaze.toHTML(Template.your_dialog_template) в атрибут "messages" вызова bootbox.dialog(), но события не будут работать.
Таким образом, трюк может заключаться в том, чтобы внедрить ваш шаблон в диалоговое окно, когда оно открыто, с помощью Blaze.render().
bootbox.dialog({
title: "Title",
message: '<span/>', // bootbox doesn't accept an empty value
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
// do tomething
}
}
}
}
);
// Inject your template inside the dialog box
Blaze.render(Template.dialog_create_cluster, $('.bootbox-body')[0])
Вот пример приложения Meteor, иллюстрирующий:
модальные диалоги (bootboxjs)
мобильное обнаружение (detectmobilebrowser + yepnope)
множественный выбор (плагин jquery Loudev)
https://github.com/alanning/meteor-modal-example
Живой пример: http://modal-example.meteor.com/
bootbox.alert(...) только в одном месте, это не совсем то, о чем я здесь говорю. Ищете хороший способ использовать шаблоны в bootbox.dialog(...) . Особо следует отметить, что я до сих пор не понял, как получить оба события и установить контекст данных (Spark.render(...) дает события, Template.test({context:'foo'}); устанавливает контекст, но теряет события) ; 30.10.2013 Я не мог получить вызовы Template.templateName.rendered и Template.templateName.events с этим подходом:
Не удается выполнить rendered и events:
bootbox.dialog
title: 'title'
message: Meteor.render -> Template.template(data: data)
closeButton: true
Выполняет rendered и events:
Визуализировать шаблон в div с display:none:
HTML
<div id="modalContainer">{{> modalTemplate}}</div>
Перерендерите его по мере необходимости, обновив его данные с помощью Session.set:
Другой шаблон
Session.set 'data', this.data
Шаблон модального окна
Template.modalTemplate.helpers
data: -> Session.get 'data'
Отобразите полностью обработанный и реактивный шаблон с помощью bootbox.dialog:
Другой шаблон
bootbox.dialog
message: $('#modalContainer')
title: 'title'
closeButton: true
Я бы предпочел отобразить шаблон в вызове bootbox.dialog, но я не мог заставить его работать без какого-то странного setTimeout дела. Я также пробовал Spark.render безрезультатно. Я собираюсь изучить bootbox.dialog, чтобы увидеть, будет ли опция callback полезным дополнением.
mrt add bootboxjsSpark.render(...).Пример:
bootbox.dialog(
Spark.render(Template.test),
[{
"label" : "Ok",
"class" : "btn-primary",
"callback": function() {}
},{
"label" : "Cancel",
"class" : "btn",
"callback": function() {}
}],
{
"header":"Some Dialog box",
"headerCloseButton":true,
"onEscape": function() {}
}
);
Бонусный пример — рендеринг html, но без каких-либо событий:
bootbox.dialog(
Template.test({contextVar:'SomeValue'}), // Set your context values here
[{
"label" : "Ok",
"class" : "btn-primary",
"callback": function() {}
},{
"label" : "Cancel",
"class" : "btn",
"callback": function() {}
}],
{
"header":"Some Dialog box",
"headerCloseButton":true,
"onEscape": function() {}
}
);
Spark.render устарел в пользу UI.render. Для этого требуется передать родительский узел, который сделает ваш пример больше непригодным для использования. Вы знаете, как заставить его работать с Meteor 1.0? 12.11.2014 Используя последнюю версию Meteor, вы можете сделать следующее
let box = bootbox.dialog({title:'Title',message:'-'});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,MyCollection.findOne({_id}),box.find(".modal-body")[0]);
Если вы хотите, чтобы диалог был реактивным, используйте
let box = bootbox.dialog({title:'Title',message:'-'});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,function() {return MyCollection.findOne({_id})},box.find(".modal-body")[0]);
Blaze.remove, когда диалоговое окно закрыто. 26.01.2015