javascript - 更新 js 模板文本中的变量

Question

我有 1 个名为 a 的字符串，它通过调用对象属性来存储带有 js 模板文字的大型 html 元素。我将这些元素保留在我的 div id hello 中。现在，当我更改对象属性时，我想更新 js 模板文字中的数据，而不再次保留 div 中的 a 元素。

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)

是的，我有这样做的替代想法，但我无法遵循这些想法

我的想法:-

I can give id or class to each span containing js template literals.

I can keep all the elements of variable a by updating objects property in div of id hello.

请告诉我如何做到这一点。

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，然后在每次更改时更改正确范围的textContent间隔步长。

但是，正如我上面所说，这些并不是真正的模板，并且 模板文字 的 ES6 名称具有误导性。原生 JavaScript 中没有绑定(bind)，模板文字是一次性生成的。因此，您需要在数据更改后重新生成文字，或者仅更改特定元素的 innerHTML 或 textContent。

更新

You must understand that vanilla JavaScript does not have built in data binding. Template Literals are really just a simplification of string concatenation. But they are not bindable templates.

您始终可以查看多个模板工具中的任何一个。如果您不想要像 React、Vue 或 Angular 这样繁重的东西，那么您可以研究 Rivets、Simulacra、knockout 或任何其他小型数据绑定(bind)库。

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>

这是我刚刚编写的一个简单的绑定(bind)库。它小于 300 字节。它可能需要一些增强功能，但它表明您可以创建一个非常简单的绑定(bind)库。

如果这些答案没有帮助，请描述为什么它们没有帮助。如果您不描述原因，我可以提供帮助。