从ajax调用到jQuery UI可排序列表构建html

Question

我在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放入sortable-list中。 但是很快变得混乱了。 我试图在其中放入<tables>在<p>加入<span> 。但是，仍然很难获得我想要的设计。

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

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

那么，您将如何做呢？ 我一直在阅读有关胡须之类的模板的信息，但似乎对我没有帮助。 而且我用字符串构建表的方法不是最好的方法。

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

Answer 1

你可以做这样的事情。

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

Answer 2

客户端诱使有很多优点，但是主要的优点是您不必在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/ 。