0

我在 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。但仍然很难得到我想要的设计。

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

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

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

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

4

2 回答 2

0

你可以做这样的事情。

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中

于 2012-07-06T07:33:50.440 回答
0

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

于 2012-07-06T12:37:05.480 回答