2015-01-11 27 views
3

我有一个模式框,其中有一些字段,并根据其他字段中的一些值,他们可能会或可能不会出现。无法填充句柄内的字段,如果语句

所以场看起来像

<div class="row"> 
    <select class="form-control" id="ddlNewInputType" placeholder="Enter your input type"> 
    <option value="input">Input</option> 
    <option value="formula">Formula</option> 
    </select> 
</div> 


{{#if isFormula }} 
    <div class="row"> 
    <input type="text" id="txtNewInputFormula" placeholder="Enter formula"> 
    </div> 
{{/if}} 

有是决定txtNewInputFormula文本框是否显示一个辅助

isFormula: -> 
    return Template.instance().isFormula.get(); 

ISFORMULA是被填充在下拉列表改变ReactiveVar

'change #ddlNewInputType': (e,t) -> 
    isFormula = $(e.currentTarget).val() == 'formula' 
    t.isFormula.set(isFormula); 

实际上,规则是如果输入类型= inp ut,不显示公式字段,如果输入type = formula,则显示公式字段。

当我的模式框加载时,它是为新的或现有的对象。如果它是一个现有的对象,我用预填充值,模态对话框在数据库中这样

'click #btnEditInput': -> 
    $('#addInputModal').modal() 
    $('#txtNewInputName').val(this.name) 
    $('#txtNewInputFormula').val(this.formula) 
    $('#ddlNewInputType').val(this.inputType) 
    $('#ddlNewInputType').change() 

的问题是,除了被填充了txtNewInputFormula各个领域。我怀疑txtNewInputFormula没有被填充,因为它在句柄内部,如果语句并且尚未被评估,因此HTML元素不存在。

我该如何解决这个问题?我如何在IF语句中填充HTML元素?

回答

4

您的诊断可能是正确的,您是否尝试过使用句柄语法来反应性地填充输入文本值与适当的数据?

像这样:

{{#if isFormula }} 
    <div class="row"> 
    <input type="text" id="txtNewInputFormula" placeholder="Enter formula" value="{{formula}}"> 
    </div> 
{{/if}} 

进行输入值转换成反应性辅助将设置它无论在最终产生的DOM元素时。

一般来说,当您发现自己操纵jQuery来修改DOM并绕过Blaze时,您可能会遇到麻烦。

1

我同意@saimeunt,你不应该用这样的jQuery操纵DOM。你应该看看有一个包装模板添加模板到DOM,并提供数据。

但是,如果你想让你的代码工作,你可以。

基本上你想延迟更新到#txtNewInputFormula,直到下一次刷新。

'click #btnEditInput': -> 
    formula = this.formula 
    Tracker.afterFlush -> 
     $('#txtNewInputFormula').val(formula) 
     return 
    $('#txtNewInputName').val(name) 
    $('#ddlNewInputType').val(this.inputType).change() 
    $('#addInputModal').modal() 
    return 
0

另一种解决方案是使用autoform包。

在架构中,您可以定义一个字段取决于另一个字段。然后当您拨打 {{#autoform collection=...}}{{afInputField...}}...{{/autoform}}时,它将显示或隐藏相应的字段。

一个例子可以发现here 2个字段A和B:

架构:

FieldValueIs = new Mongo.Collection("FieldValueIs"); 
FieldValueIs.attachSchema(new SimpleSchema({ 
    a: { 
    type: String, 
    allowedValues: ["foo", "bar"] 
    }, 
    b: { 
    type: String 
    } 
})); 

HTML形式:

{{#autoForm collection="FieldValueIs" type="insert" id="FieldValueIsForm"}} 
    {{> afQuickField name="a" options="allowed" noselect=true}} 
    {{#if afFieldValueIs name="a" value="foo"}} 
    {{> afQuickField name="b"}} 
    {{/if}} 
{{/autoForm}} 
0

有你如果选择A B将显示研究将if语句的内容放入其自己的模板中并使用Template的rendered函数进行填充?我假设这是流星,因为你的标签。

这当然只是部分代码,但这样的:

HTML:

<template name="someTemplate"> 
    //.... 
    <div class="row"> 
    <select class="form-control" id="ddlNewInputType" placeholder="Enter your input type"> 
     <option value="input">Input</option> 
     <option value="formula">Formula</option> 
    </select> 
    </div> 
    {{#if isFormula }} 
    {{>formulaInput}} 
    {{/if}} 
    //.... 
</template> 


<template name="formulaInput"> 
    <div class="row"> 
    <input type="text" id="txtNewInputFormula" placeholder="Enter formula"> 
    </div> 
</template> 

JS:

Template.formulaInput.rendered = function(){ 
    //do the populating 
} 

当功能被渲染呈现的函数被调用这这种情况下,isFormula辅助函数返回true。流星manual有关Blaze/Template如何工作的一些很好的信息。