1

我编写了一个可以在 HTML 中动态使用并由 JavaScript 解析的Liquid实现。反过来，我使用 AJAX 来提供数据源。这看起来像这样：

<div id="container">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
    {% for user in users %}
      <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

其处理方式类似于：

$.ajax({
  url: "response.json",
  success: function(data) {
    var template = document.getElementById('container'),
        parse1 = Liquid.parse(template.innerHTML);

    template.innerHTML = parse.render(data);
  }
});

现在，假设$.ajax每隔一段时间就会调用一次，那么它的内容#container就会用任何可能发生变化的东西进行更新。这样做的问题是，一切都被重新加载，而不是仅仅改变了什么；您松散了文本选择，诸如“活动”标签等之类的东西。

为了解决这个问题，我一直在使用google-diff-match-patch在替换之前比较两个渲染的字符串，这反过来又为我提供了每个更改的位置，因此我可以遍历 HTML 并修改它们。

在完成所有这些工作后，我开始意识到对我的计划非常致命的事情：

template.innerHTML[###] = 'new content';

丝毫不起作用。显然，我无法根据其字符串索引修改元素的 innerHTML。

我究竟做错了什么？有没有更简单的方法来做到这一点？

无论您推荐什么，请记住我无法控制 DOM 元素。无论 Liquid 正在解析什么，都需要对其替换逻辑不可知（即，我不能使用 ID、类等）。

我能想到的唯一解决方案是：

  • 不知何故，我想要做的事情超过了工作……那太好了。
  • 创建一个 DOM diff-match-patch 并以这种方式处理事情（或者使用浏览器中存在的一个？）
4

0 回答 0