动态火焰模板中的反应式助手输入值行为

Question

我正在使用一个帮助程序将反应变量添加到动态模板中：

<template name='integer_element'>
{{#with data}}
    <div class='css_integer_element_wrapper'>
        <input class='css_integer_input js_input_element' value='{{this.value}}'>
    </div>
{{/with}}

当数据以及相应的this.value更改时，应该更改输入元素中的显示值。 由于某些原因，当初始值为空字符串时，此方法不起作用。

如果初始值是123，而我手动将输入更改为124，则在数据更改时将显示新值，并且124将被丢弃，但是当初始默认值为空字符串并且我将其更改为124时，则在数据更改后输入元素仍显示124。

任何想法如何克服这个？

Answer 1

在此处发布答案以澄清问题，添加更多代码，因为注释太多了。

我正在使用动态模板来呈现取决于数据类型的数据。 我需要一个input元素，以便用户可以编辑默认值（来自后端）。 一旦用户修改了输入元素，DOM就会接管，然后如果重新加载模板，特定的输入就不会被重置，如果它没有被销毁的话。 我已经使用“如果有数据可用”标志构建了一种变通方法，但是它并不是很方便，只是在那里，所以我可以确保模板被销毁并重新呈现。 是否有更好的方法来重新渲染特定模板？

<body>
{{> form}}
</body>
<template name="form">
    {{#with data}}  
        {{#if data_available}}
        {{#each this.rows}}
             <div class="css_form_wrapper">
                {{>Template.dynamic template=this.template data= this}}
             </div>
        {{/each}}
        {{/if}}
        {{#unless data_available}}
            <div>
                Loading Data
            </div>
        {{/unless}}

        <div>
            <button class='button'>Refresh</button>
        </div>
    {{/with}}
</template>

<template name='element'>
    {{#with data}}
        <div class='element_wrapper'>
            <input class='css_element js_element' value='{{this.value}}'>
        </div>
    {{/with}}
</template>

这是它的js：

var form_tracker = new Tracker.Dependency;
var backend_tracker = new Tracker.Dependency;
var data_available = true;

Template.form.helpers({
  data: function () {
    var data  = _readData();
    return data;
  },
  data_available: function () {
    return data_available
  }
});

Template.form.events({
  'click .button':function(){
    data_available = false;
    _readBackendData();
    form_tracker.changed();
  }
});

var _readData = function () {
  form_tracker.depend();
  backend_tracker.depend();
  if(backend_tracker.data != undefined) {
    return backend_tracker.data
  } else {
    return {rows: [{'template': 'element', 'value' : 'no data initially'}]};
  }
};

var _readBackendData = function () {
  Meteor.setTimeout(function() {
    backend_tracker.data = {rows: [{'template': 'element', 'value' : 123}, {'template': 'element', 'value' : ''}]};
    backend_tracker.changed();
    data_available = true;
  }, 800);};

Template.element.helpers({
  data: function () {
    var data  = this;
    return data;
  }
});

您可以通过删除HTML中的“ if data_available”条件来测试不同的行为。 在有条件的情况下，模板将被销毁，并且元素中的所有输入都将被覆盖，而在没有条件的情况下，输入元素中的当前值将保留。