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 を作成し、そのように処理します (または、ブラウザー用に存在するものを使用しますか?)