構建HTML從一個AJAX調用的jQuery UI的排序列表

林具有HTML/JavaScript的一個設計問題。構建HTML從一個AJAX調用的jQuery UI的排序列表

我追加的jQuery UI的排序到我的網絡應用：繼承人演示的排序（不能證明現在我的應用程序）： http://jqueryui.com/demos/sortable/default.html

現在我正在填充的是拖放在JavaScript中的數據從Ajax下拉列表呼叫。該列表一直由用戶改變。

我嘗試做這樣的事情：

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

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

等。一些申報單的也有屬性像'id="' + data.id + '"' 變量設置，那麼我嘗試在排序列表，以適應這個字符串htmldata。但它很快就變得混亂。我試圖適應它<tables>和<p>與<span> S IN，但它仍然很難得到我想要的設計。

廣東話發表圖片由於缺乏信譽的，但這裏是我想要的設計（這只是一個<li>在<ul>）：

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

那麼你會怎麼做呢？我一直在閱讀關於鬍鬚等模板，但似乎並沒有幫助我。而我用字符串構建表格的方式不是最好的方法。

任何關於如何做到這一點的例子或信息，非常感謝

來源

2012-07-05 nilsi

這實際上是一種理想的JavaScript模板用例。 – 2012-07-05 20:10:53

這裏使用模板的優勢在哪裏？ – nilsi 2012-07-06 07:57:52

我發佈了一個解決這個問題的答案。 Okey！ – 2012-07-06 12:37:32

有客戶端的許多優點誘人的，但最主要的是，你不必惹在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-06 12:37:05

Okey！現在我明白了，確實這是一個可愛的解決方案，謝謝！ – nilsi 2012-07-06 13:10:43

你可以做這樣的事情。

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-06 07:33:50

構建HTML從一個AJAX調用的jQuery UI的排序列表

回答

相關問題