在 DOM 完成之前调用渲染 - 流星火焰

Question

我正在使用 json 创建一个动态表单，并尝试使用 jquery-validation 插件向输入字段添加验证规则。

Json结构和辅助方法是：

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>

现在我正在尝试在渲染方法中添加验证规则：

Template.eventCreate.rendered = function(){
    $('#newEventForm').validate({
       ....
    });

    fields.forEach(function(field, index){
        if(field.validationRules){
            $('#'+field.label).rules('add', field.validationRules);
        }
    });
}

它在输入文本的情况下有效，但会引发复选框异常，因为复选框 DOM 仍未布局，并且没有 id 为“货币”的元素。

我假设只有在 DOM 渲染完成时才会在流星火焰中调用一次。虽然在这里调用了一次，但是在 DOM 渲染完成之前。

编辑

之前我在 js 文件本身中对 JSON 进行硬编码，现在我从 mongo 中检索它。

但它似乎只在第一次调用呈现的回调，而不是在每次 mongo 集合更改时调用（这反过来又更新了 DOM）

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]}

这表明（我什至在 js 脚本中使用断点进行了尝试）仅当脚本加载模板时未定义并且在前端没有呈现输入字段但调用了呈现的回调。现在稍后当模板填充数据时，会呈现输入字段但不会再次调用回调。

Answer 1

recommended pattern 是将您的 {{#each}} 块的内容放在单独的模板中，然后利用 那些 模板的渲染事件。

顺便说一句，Meteor.defer 不再需要了。