用jQuery顯示帶有相應文本/網址的動態圖像列表

Question

我有一個web服務，它返回圖像列表，它是用戶在XML格式點擊這些圖像時需要重定向到的標題和URL。我需要構建這些可水平對齊的可點擊圖像的動態列表，並且需要使用jQuery或JavaScript來完成此操作。有沒有已知的組件可以做到這一點？我需要從頭開始寫嗎？如果我這樣做，那麼我該如何去做呢？

Answer 1

我建議使用jQuery.parseXML()將XML獲取到jQuery對象中，然後遍歷該對象以填充可觀察的可觀察對象的可觀察數組。有關如何使用敲除進行動態綁定的示例，請參見http://knockoutjs.com/。我會使用無序列表來呈現每個帶有標題和鏈接的圖像。您可以以任何您想要的方式設計列表的樣式。

瀏覽到knockout.js教程 - http://learn.knockoutjs.com/#/?tutorial=collections釹在JavaScript中，添加：

function SiteItem(u, t, s) { 
    var self = this; 
    self.url = ko.observable(u); 
    self.title = ko.observable(t); 
    self.imgSrc = ko.observable(s); 
} 

// Overall viewmodel for this screen, along with initial state 
function ViewModel() { 
    var self = this; 

    // Editable data 
    self.items= ko.observableArray([ 
     new SiteItem('http://www.google.com/', 'Test', 'http://www.google.com/images/srpr/logo3w.png'), 
     new SiteItem('http://www.google.com/', 'Test', 'http://www.google.com/images/srpr/logo3w.png') 
    ]); 
} 

ko.applyBindings(new ViewModel()); 

在HTML

那麼，對於UL淘汰賽模板：

<h2>Your images</h2> 

<ul class="horizontal-list" id="sites" data-bind="foreach: items"> 
    <li class="site" data-bind="attr: { 'data-url': url }"> 
    <a data-bind="text: title, attr: { href: url }"></a> 
    <img data-bind="attr: { src: imgSrc, alt: title }" /> 
    </li> 
</ul>