Question

我正在克隆一个实时降价编辑器， dillinger.io ，但与dillinger不同的是，当你在文档中嵌入视频时，我不希望视频刷新并闪存每一个文档更新的时间，这是很常见的。

DOM的组织方式如下。

<div id='editor'></div>
<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>What a dull video</p>
</div>

本案例中的编辑器是精彩的Ace editor，它允许我通过editor.getValue()

进行写作。

有一种简单的方法可以做到这一点吗？我用谷歌搜索，没有发现任何有用的东西。

这就是我现在所拥有的

function update(){
    var mk = editor.getValue();
    var updatedHtml = converter.makeHtml(mk);
    $('#viewer').html(updatedHtml); 
}

editor.getSession().on('change', function(e) {
    update();
});

但我想把它改成像这样的东西

function update(){
    var before = $('#viewer').html();   
    var mk = editor.getValue();
    var updateHtml = converter.makeHtml(mk);
    $('#viewer').replaceWhereDifferent(updateHtml, before); 
}

这样做会阻止每次更新时闪存嵌入的YouTube视频。

问题是我的功能

没有很好的形式

replaceWhereDifferent(updateHtml, before)

一些示例html字符串将是

<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>comment</p>
</div>

现在说用户将p评论更改为

<p>OMG thats the best video ever</p>

我希望在不刷新视频的情况下进行更新

所有这些代码都是由降价转换器从Ace editor获取代码生成的。因此所有降价都是一起转换的，我不能区分或标记降价的不同部分。我得到的只是更新的html字符串

Answer 1

是的，这是可能的。您可以使用Google's Incremental DOM或者您可以查看Flarum使用的s9e TextFormatter并提取您需要的部分。

Answer 2

在DOM元素上放置一个属性，其中包含上次更新时间的时间戳。在进行实际更改时增加时间戳，仅在时间戳不同时更新DOM。

Answer 3

没有“简单”的方式。你必须对两个html进行差异化处理，然后用delta来做奇特的事情。

我会对问题采取完全不同的方法：

如果要更新html，请使用jQuery将视频标记HTML放入新的DIV中。
使用简单的字符串替换或.html（）或其他任何内容替换所有HTML。
将视频标记放回原来的位置。

e.g。

$('#placeholder').html($('#videodiv').html()); //1.
$('#divtoupdate').load("/URL/for/newdata");    //2
$('#videodiv').html($('#placeholder').html()); //3

Answer 4

感谢您提供额外信息。现在我们有了更清晰的画面。如果您只想替换容易的<p>。

JS：

$('#add_comment').click(function(){ //User clicks add comment
  var comment = $('#comment_input').val(); //Get user's comment
  $('#viewer p').html(comment); //update viewer's <p>
});

我希望这可以让您了解如何继续。

Jquery替换html，仅在更改的地方

4 个答案: