Javascript 在DOM完成之前渲染调用-流星火焰
我正在使用json创建一个动态表单,并尝试使用jquery验证插件向输入字段添加验证规则 Json结构和助手方法是:Javascript 在DOM完成之前渲染调用-流星火焰,javascript,jquery,meteor,Javascript,Jquery,Meteor,我正在使用json创建一个动态表单,并尝试使用jquery验证插件向输入字段添加验证规则 Json结构和助手方法是: var fields = [{ label: "Name", type: {name: 'STRING'}, validationRules: { required: true, maxlength: 100, minlength: 3 } },{ label: "Currency",
var fields = [{
label: "Name",
type: {name: 'STRING'},
validationRules: {
required: true,
maxlength: 100,
minlength: 3
}
},{
label: "Currency",
type: {name: 'CHECKBOX'},
defaultValue: ['USD', 'INR'],
validationRules: {
required: true
},
sourceCollection: 'oNLFfi4L3zgNLhScv',
}] ;
Template.eventCreate.helpers({
fields: function(){
console.log("calling fields");
fields.forEach(function(field, index){
field.sourceCollectionData = StaticLists.find({_id: field.sourceCollection});
});
return fields;
}
});
模板看起来像:
<template name="eventCreate">
<form id="newEventForm" class="form-horizontal">
{{#each fields}}
<div class="form-group">
<label class="col-xs-2 control-label">{{label}}</label>
<div class="col-xs-6">
{{#if equals type.name 'STRING'}}
<input name="{{label}}" id="{{label}}" class="form-control" placeholder="Enter {{label}}" value="{{defaultValue}}" />
{{/if}}
{{#if equals type.name 'CHECKBOX'}}
{{#each sourceCollectionData}}
{{#if isActive}}
<div class="col-xs-2 checkbox">
<label class="checkbox-inline">
<input type="checkbox" name="{{../label}}" id="{{../label}}" value="{{name}}" {{checked ../defaultValue}}> {{name}}
</label>
</div>
{{/if}}
{{/each}}
{{/if}}
</div>
</div>
{{/each}}
</form>
</template>
它在输入文本的情况下工作,但对复选框抛出异常,因为复选框DOM仍然没有布局,并且没有id为“Currency”的元素
我假设在meteor blaze中,只有在DOM渲染完成时才会调用一次渲染。虽然在这里只调用一次,但在DOM渲染完成之前
编辑
之前我在js文件中硬编码JSON,现在我从mongo中检索它
但它似乎只在第一次调用呈现回调,而不是在每次mongo集合更改时调用(这反过来会更新DOM)
现在控制台输出类似于:
template undefined event_create.js?bfeba9389401dac358bc313bd9d4205818e356a1:52
rendering main template event_create.js?bfeba9389401dac358bc313bd9d4205818e356a1:98
template Object {_id: "iFDndmjavtFN8AdGQ", name: "Job Template", description: "Job Template", fields: Array[13]}
这表明(即使在js脚本中有一个断点,我也尝试过)当脚本加载模板时,模板是未定义的,前端没有呈现输入字段,但会调用呈现回调。现在,当模板中填充数据时,会呈现输入字段,但不会再次调用回调。方法是将{each}}块的内容放入单独的模板中,并点击这些模板的呈现事件
顺便说一下,Meteor.defer不再是必需的。该复选框是否输入render?选中的部分看起来不正确是复选框未渲染。实际上,它发生在每个块内渲染的所有字段上,如单选按钮、下拉选项等。因此,在我看来,每个块都是问题所在,渲染时间晚于渲染回调。自从使用blaze之后,我注意到了相同的行为,my#each block呈现,但回调在呈现之前触发。为{{#each}}块制作单独的模板有助于但呈现会在从mongo加载对象时出现另一个问题。我已针对该场景编辑了我的问题
Template.eventCreate.helpers({
fields: function(){
var template = EventTemplate.findOne({name: 'Job Template'});
console.log("template", template);
if(template){
Session.set("template", template);
template.fields.forEach(function(field, index){
field.sourceCollectionData = StaticLists.find({_id: field.sourceCollection});
});
return template.fields;
}
}
});
Template.eventCreate.rendered = function(){
$('#newEventForm').validate({
...
...
console.log("rendering main template");
addValidationRules(Session.get('template'));
}
template undefined event_create.js?bfeba9389401dac358bc313bd9d4205818e356a1:52
rendering main template event_create.js?bfeba9389401dac358bc313bd9d4205818e356a1:98
template Object {_id: "iFDndmjavtFN8AdGQ", name: "Job Template", description: "Job Template", fields: Array[13]}