从 ajax 调用构建 html 到 jquery UI 可排序列表答案

【问题标题】：Building html from an ajax call to jquery UIs sortable list从 ajax 调用构建 html 到 jquery UI 可排序列表
【发布时间】：2012-07-05 19:40:54
【问题描述】：

我在 HTML/JavaScript 中遇到了设计问题。

我将可排序的 jquery UI 添加到我的 Web 应用程序：这是关于可排序的演示（现在无法显示我的应用程序）： http://jqueryui.com/demos/sortable/default.html

现在我用来自 ajax 调用的数据填充 JavaScript 中的拖放列表。该列表一直由用户更改。

我尝试做这样的事情：

Var htmlData = '<div id=wrapper>'
             +'<div>'
             +data.title
             +'</div>'
             +'<div>'
             +data.description
             +'</div>';

${"#sortable-list"}.html(htmlData);

等等。一些 div 还具有在变量中设置的属性，例如 'id="' + data.id + '"' 然后我尝试将此字符串 htmldata 放入可排序列表中。但它很快就变得混乱了。我尝试将<tables> 放入其中，并将<p> 与<span>s 放入其中。但仍然很难得到我想要的设计。

由于缺乏声誉而无法发布图片，但这是我想要的设计（这只是<ul> 中的一个<li>）：

http://img546.imageshack.us/img546/9179/48361880.gif http://img546.imageshack.us/img546/9179/48361880.gif

那么你会怎么做呢？我一直在阅读有关 mustache 之类的模板，但它似乎对我没有帮助。而我用字符串构建表格的方式并不是最好的方式。

非常感谢任何有关如何执行此操作的示例或信息

【问题讨论】：

这实际上是 JavaScript 模板的理想用例。
这里使用模板的优势在哪里？
我发布了一个解决这个问题的答案。

标签： javascript jquery jquery-ui html-lists

【解决方案1】：

客户端诱惑有很多优点，但主要的优点是您不必在 JavaScript 中将 HTML 串在一起。这样做不仅容易出错，而且很快就会成为维护的噩梦。

例如，您可以使用 Underscore.js 来满足您的需求。

如您所见，HTML 布局清晰，可以根据您的需求更改轻松更改。

<script type="text/template" id="sortable-entry">
    <% _.each(items, function(item) { %>
        <div>Title: <%= item.title %></div>
        <div>Description: <%= item.description %></div>
        <hr />
    <% }); %>
</script>

<ul id="sortable-list"></ul>

<script>
    var data = {
        items: [
        { title: 'title1', description: 'description1' },
        { title: 'title2', description: 'description2' },
        { title: 'title3', description: 'description3' },
        { title: 'title4', description: 'description4' },
        { title: 'title5', description: 'description5' }
        ]
    };

    var event_html = _.template($('#sortable-entry').html());
    $(event_html(data)).appendTo($('#sortable-list'));
</script>

这是一个活生生的例子 - http://jsfiddle.net/tj_vantoll/kmXUr/。

【讨论】：

【解决方案2】：

你可以这样做。

var items[]

items.push($('<div />', { html: data.title }));
items.push($('<div />', { html: data.description}));

$("#sortable-list").html($('<div />', {
     'id' : 'wrapper',
     'class' : 'yourclass',
     html: items.join('')
  })
);

items.push 您可以在循环中使用来循环所有数据并将项目推送到数组中。稍后将数组项加入到html中

【讨论】：