Question

我编写了Liquid的实现，可以在HTML中动态使用，并由JavaScript解析。反过来，我正在使用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差异匹配补丁并以这种方式处理（或使用浏览器存在的补丁？）

从ajax和液体中动态DOM diff修改

0 个答案: