更新 js 模板文字中的變量

Question

我有 1 個名為a 的字符串，它通過調用 objects 屬性來存儲帶有 js 模板文字的大型 html 元素。 我將這些元素保留在我的div id hello 中。 現在，我想在更改對象屬性時更新 js 模板文字中的數據，而不再將 a 的元素保留在 div 中。

my code:-


var object = {name:'alisha', age:18 , count:1000};

var a = `<div class="nav">
              <span>name:</span><span>${object.name}<span><br>
              <span>age:</span><span>${object.age}<span><br>
              <span>count:</span><span>${object.count}<span><br>
              <input type="text">
         </div>`;

  var el = document.getElementById('hello');
  el.innerHTML = a;

 var replace_count = 0;
 setInterval(function(){
     replace_count = replace_count + 1;
     var object.count = replace_count;
 },2000)

是的，我有這樣做的替代想法，但我無法遵循這些想法

我的想法：-

我可以為每個包含 js 模板文字的 span 提供 id 或 class。

我可以通過更新 id hello 的 div 中的 objects 屬性來保留變量 a 的所有元素。

請讓我知道我該怎么做。

Answer 1

您需要將對象和字符串放在函數中才能使其工作。

 function doReplace(count) { var object = {name:'alisha', age:18 , count}; var a = `<div class="nav"> <span>name:</span><span>${object.name}<span><br> <span>age:</span><span>${object.age}<span><br> <span>count:</span><span>${object.count}<span><br> <input type="text"> </div>`; var el = document.getElementById('hello'); el.innerHTML = a; } var replace_count = 0; doReplace(replace_count); setInterval(function(){ replace_count = replace_count + 1; doReplace(replace_count); },200)

 <div id="hello"></div>

我將時間更改為 200 毫秒而不是 2 秒，以便更容易查看。

但是每次都必須重新創建字符串文字。 它是一個文字，而不是一個模板。

如果你不想每次都替換整個innerHTML ，那么你需要設置innerHTML一次，然后在interval的每一步更改正確span的textContent 。

但是，正如我上面所說，這些並不是真正的模板，模板文字的 ES6 名稱具有誤導性。 vanilla JavaScript 中沒有綁定，模板文字是一次性的。 因此，您需要在數據更改后重新生成文字，或者僅更改特定元素的innerHTML或textContent 。

更新

您必須了解 vanilla JavaScript 沒有內置數據綁定。 模板文字實際上只是字符串連接的簡化。 但它們不是可綁定的模板。

您可以隨時查看多種模板工具中的任何一種。 如果你不想要像 React、Vue 或 Angular 這樣沉重的東西，那么你可以研究 Rivets、Simulacra、knockout 或任何其他許多小型數據綁定庫。

 var object = {name:'alisha', age:18 , count:0}; function render(obj) { var binders = document.querySelectorAll('[bind]'); binders.forEach( (el) => { var field = el.getAttribute('bind'); if (field && (obj[field] !== undefined)) { el.innerHTML = obj[field]; } } ); } var replace_count = 0; render(object); setInterval(function(){ object.count++; render(object); },200)

 <div class="nav"> <div>name: <span bind="name"></div> <div>age: <span bind="age"></div> <div>count: <span bind="count"></div> <input type="text"> </div>

這是我剛剛寫的一個簡單的綁定庫。 它小於 300 字節。 它可能需要一些增強功能，但它表明您可以創建一個非常簡單的綁定庫。

如果這些答案沒有幫助，請描述為什么它們沒有幫助。 如果您不描述原因，我可以提供幫助。

Answer 2

在這里，這個簡單的功能可以做所有事情。

const getTemplateByInterpolatingParams = (templateHTML, placeholders) => {
  try {
    const names = Object.keys(placeholders);
    const values = Object.values(placeholders);
    return new Function(...names, `return \`${templateHTML}\`;`)(...values);
  } catch (error) {
    console.log('Error in template interpolation', error);
    return error;
  }
};

使用template literals和具有相同鍵的對象傳遞模板

Answer 3

如果您將使用 jQuery，這很容易：

HTML

<span>count:</span><span class="count"></span>

JS

var replace_count = 0;
setInterval(function(){
    $('.nav span.count','#hello').text(replace_count++);
}, 2000);

這將每 2 秒更改 div#hello 中所有 span.count 中的數據。 如果你渲染${object.count} ，它不是一個普通的 Text，或者你使用 view.js 或帶有特殊模板引擎的 angular。

在小提琴上測試： https : //jsfiddle.net/chrobaks/r2a1anw6/