Question

或许这更像是一个理论问题，而不是代码问题，但底层解决方案将基于代码，所以我希望它适合这里。

基本结构是我有一个无序的控件列表，根据发生的情况进行更新。信息通过[[url，text]。[url2，text2]] arrarys的JSON数据包进入，以构建锚点：

$.each( controls, function( i, item ) {
        $("<li id=\"control_"+i+"_"+ID+"\"><a href=\""+item[0]+"\">"+item[1]+"</a></li>").appendTo("#ul_controls_"+ID);
});

我有一个document.on侦听器响应点击事件，因此不必在此重新附加。

这会创建一个基本的链接列表，即

Start
Edit
View

是默认情况。

按下开始时，开始和编辑消失，停止进入

View
Stop

结束后，控件再次更新，删除停止并返回编辑和启动选项。

View
Start
Edit

正如你所看到的，我已经从原来的状态失去了位置（视图现在位于顶部而不是底部，因为它会持续存在并附加到，好吧，附加）。

我过度简化了这个例子，因为有很多其他控件可以添加到循环中。

那么，我如何保持开始/停止交易位置的位置，随意编辑进出，并在结束时查看停留（请记住，根据状态，我在此列表中还有5-10个控件，所以仅依靠附加1个元素可能是不可靠的）

我的一些想法是：

始终将所有控件物理地放入DOM，并切换可见性
不是JSON url / name对，而是每次从服务器发送一个完整的$("#ul").html("<li> ... to last </li>");样式注入，而不是根据需要附加和分离单个li元素（性能命中？JSON格式问题？）< / LI>
提出一个可以分类的ID方案，或类似插槽的解决方案，但是这方面的方法是从我的脑中吸取空白。

我对此有任何想法或建议。

Answer 1

切换可见性

这通常很有效，除非你有很多需要隐藏的元素。性能方面，20个隐藏元素不是问题，因为您不查询服务器以获得标记更改，因此应用程序可能会感觉更具响应性。如果你有许多相同的对象，每个对象可能有20个元素，那么这是错误的方法。如果是这种情况，请参阅JS对象部分。

虽然这个逻辑可能不适合你的应用程序。隐藏什么内容的所有规则都需要在JS中作为客户端。由于这些列表项是链接，我假设你已经把这种逻辑服务器端。

发送包含每个JSON请求的完整列表

这很好地整合了服务器端的所有功能，但除非列表不经常更新，否则我不推荐它。

排序方案

这里有很多选择。我推荐这样的东西。

当您定义项目列表（服务器端）时，为每个项目提供一个订单属性，以便在所有项目都可见时，它们将各自具有唯一的位置。

ie：item = {href:"...",text:"...",order:1}

然后在发送项目的同时发送该属性，并将其用作<li>的{{1}}属性（或其他内容）。然后使用this问题（或使用排序插件）的任何答案进行排序。

JS对象

这将是我的方法（但我有偏见）。我保留了服务器端代码，用于基本数据检索和安全检查。

使每个控制盒成为JS＆＃34;对象＆＃34;使用你喜欢的任何模式。在页面加载时或在需要时使用完整的项目列表初始化控件框对象。每个对象处理它自己的服务器请求（仅数据，没有标记），重新排序（或重绘）本身并通过delegated event listeners在其链接上保持活跃。使用上面的排序方案或通过将其构建到重绘逻辑中来完成排序。或者通过切换可见性。

或者是徒劳的东西。我不能比那更具体，因为它归结为细节。虽然客户端较重，但它将所有dom操作逻辑放在一个位置，需要的服务器请求更少，并且不易保持亮光。

如果您想要特定的代码示例，请告诉我。这个问题相当广泛，因此，我的答案也是如此。

修改

小提琴：http://jsfiddle.net/he027yh5/4/

显示一个基本算法，只将缺失的值插入到DOM中（避免删除和插入冗余。）它编码不是很好，需要进行错误检查，但它有效，我猜它会比重建每个都快更新。我不相信重建会在第一时间产生太大影响。

jquery - 动态更新列表定位

1 个答案: