Question

我有一个名为 a 的字符串，它通过调用objects属性来存储带有js模板文字的大型html元素。我将这些元素保留在 div id hello 中。现在我想在更改对象属性时更新js模板文字中的数据，而不再保留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模板文字的每个范围提供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一次，然后在间隔的每一步中更改正确范围的textContent。 / p>

但是，正如我上面所说，这些并不是真正的模板，而模板文字的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} ，则它是普通文本，或者使用带有特殊模板引擎的view.js或angular。

在小提琴上测试它： https://jsfiddle.net/chrobaks/r2a1anw6/

更新js模板文字中的变量

3 个答案: