2015-01-11 28 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如何工作的一些很好的信息。