Невозможно заполнить поля внутри руля, если оператор

Question

У меня есть модальный блок с некоторыми полями и на основе некоторых значений в других полях они могут появляться или не отображаться.

Так поля выглядят как

<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, не отображают поле формулы, а если формула ввода = формула, отобразите поле формулы.

Когда мой модальный бокс загружается, он либо для нового, либо для существующего объекта. Если существующий объект, я предварительно заполнить поле модальный со значениями в базе данных, как этот

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

Проблема в том, каждое поле, за исключением txtNewInputFormula заселяется. Я подозреваю, что txtNewInputFormula не заполняется, потому что он находится внутри инструкции handlebar if, и это еще не было оценено, и поэтому элемент HTML не существует.

Как я могу обойти это? Как я могу заполнить HTML-элемент внутри оператора IF?

Answer 1

Возможно, вы, вероятно, верны в своей диагностике, попробовали ли вы использовать синтаксис руля, чтобы по-разному заполнить значение входного текста соответствующими данными?

Нечто подобное:

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

Создание входного значения в реакционно-помощник будет установить его независимо, когда элемент DOM, в конечном счете создается.

Вообще говоря, когда вы пытаетесь манипулировать jQuery для изменения DOM и обхода Blaze, вы можете столкнуться с проблемами.

Answer 2

Я согласен с @saimeunt, вы не должны манипулировать DOM с помощью jQuery, как это. Вы должны посмотреть на наличие обертки для добавления модальных шаблонов в DOM и предоставления данных.

Однако, если вы хотите, чтобы ваш код работал, вы можете.

В основном вы хотите отложить обновление до #txtNewInputFormula до следующего флеша.

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

Answer 3

Другим решением является использование autoform пакета.

В схеме вы можете определить, что поле зависит от другого поля. Затем, когда вы звоните {{#autoform collection=...}}{{afInputField...}}...{{/autoform}}, он отобразит или спрячет соответствующую заявку.

Пример можно найти here с 2 полями А и В: B будет отображаться, если выбран A:

Schemas:

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

Answer 4

У вас заглянул в помещение содержания инструкции if в свой собственный шаблон и заселял его с помощью функции шаблона? Я предполагаю, что это метеор из-за вашего тега.

Это лишь частичный код, конечно, но что-то вроде:

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> 

ЯШ:

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

Визуализированное функция вызывается, когда функция оказывается что в этот случай будет, когда вспомогательная функция isFormula вернется. Метеор manual содержит отличную информацию о том, как работает Blaze/Template.