问题描述
我目前正在使用铁路由器,这是我第一次尝试使用 Meteor 平台.我遇到了大多数 jquery 库未能正确初始化的问题,因为 Meteor 呈现 html 的方式,$(document).ready() 在呈现任何模板之前触发.我想知道是否有任何来自 Meteor/iron-router 的回调允许我替换 jQuery 的 dom ready?
I am currently using iron-router and this is my very first attempt to try out the Meteor platform. I has been running into issues where most of the jquery libraries failed to initialized properly because the of the way Meteor renders html, $(document).ready() fires before any templates are rendered. I am wondering is there any callbacks from Meteor/iron-router that allows me to replace the jQuery's dom ready?
此外,如果 dom 元素中的某些元素是由 jQuery/javascript 自定义的,我应该如何(轻松且正确地)处理它们的实时更新?
Also, how should I (easily and properly) handle the live update of the dom elements if some of them are customized by jQuery/javascript?
这就是我目前正在做的事情,我觉得它非常hackish,如果在初始化后更新元素,可能会遇到问题.
This is what i am currently doing, i feel like it is very hackish and probably would run into issues if the elements got updated after the initialization.
var jsInitalized = false;
Router.map(function () {
this.route('', {
path: '/',
layoutTemplate: 'default',
after: function(){
if(!jsInitalized){
setTimeout(function(){
$(document).ready( function() { $$$(); });
}, 0);
jsInitalized = true;
}
}
});
}
推荐答案
使用 Meteor,您通常想考虑 模板 何时准备好,而不是 dom 何时准备好准备好了.
With Meteor you generally want to think about when a template is ready, not when the dom is ready.
例如,假设您想使用 jQuery DataTables 插件向由模板创建的表格元素添加排序.您将监听模板的渲染事件并将插件绑定到 dom:
For example, let's say you want to use the jQuery DataTables plugin to add sorting to a table element that's created by a template. You would listen to the template's rendered event and bind the plugin to the dom:
HTML:
<template name="data_table">
<table class="table table-striped" id="tblData">
</table>
</template>
JavaScript:
JavaScript:
Template.data_table.rendered = function () {
$('#tblData').dataTable();
};
现在无论何时重新渲染模板(例如,如果数据更改),您的处理程序都会被调用,您可以再次将 jQuery 插件绑定到 dom.
Now anytime the template is re-rendered (for example, if the data changes), your handler will be called and you can bind the jQuery plugin to the dom again.
这是一般方法.有关完整示例(包括用行填充表格),请参阅此答案.
This is the general approach. For a complete example (that includes populating the table with rows) see this answer.
这篇关于如何正确处理为 Meteor 准备的 dom的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!