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を使用して、レンダリングされた 2 つの文字列を置換前に比較しました。これにより、各変更の位置がわかるので、HTML をループして変更できます。

このすべてが機能した後、私は自分の計画にとって非常に致命的なことに気づきました。

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

少しも機能しません。どうやら、文字列インデックスに基づいて要素の innerHTML を変更することはできません。

私は何を間違っていますか?これを行う簡単な方法はありますか?

あなたが推奨するものは何でも、私は DOM 要素を制御できないことに注意してください。Liquid が解析しているものは何でも、その置換ロジックに依存しない必要があります (つまり、ID やクラスなどを使用できません)。

私が考えることができる唯一の解決策は次のとおりです。

  • どういうわけか、私がやろうとしていることを仕事の上で手に入れましょう... それは素敵でしょう.
  • DOM diff-match-patch を作成し、そのように処理します (または、ブラウザー用に存在するものを使用しますか?)
4

0 に答える 0