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

在此处发布答案以澄清问题，添加更多代码，因为评论文字过多。

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

<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”条件来测试不同的行为。在条件下，模板被破坏，元素中的任何输入都被覆盖，没有条件，输入元素中的当前值仍然存在。

动态闪耀模板中的反应性辅助输入值行为

1 个答案: