反應性輔助輸入值行爲模板

我使用的是幫手得到一個反應變量爲一個動態模板：反應性輔助輸入值行爲模板

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

任何想法如何克服這一點？

來源

2017-08-09 keysandsunglasses

請顯示'data' helper的代碼以及您初始化反應變量的部分。 – Styx

此外，這不是一個動態模板，只是一個普通的火焰模板。 –

在這裏發佈一個答案來澄清問題，添加更多的代碼，因爲它是太多的文字的評論。

我正在使用動態模板來呈現依賴於數據類型的數據。我需要一個輸入元素才能讓用戶編輯默認值（來自後端）。只要用戶修改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; 
    } 
});

您可以測試通過取出「如果data_available」條件的HTML的不同的行爲。使用條件模板會被銷燬，並且元素中的任何輸入都會被覆蓋，而輸入元素中的當前值將保留。

來源

2017-08-10 08:46:20 keysandsunglasses

反應性輔助輸入值行爲模板

回答

相關問題