jquery - 使用 jQuery 显示具有相应文本/URL 的动态图像列表

Question

我有一个 Web 服务，它向我返回一个图像列表，它是用户在单击 XML 格式的这些图像时需要重定向到的标题和 URL。我需要构建这些水平对齐的可点击图像的动态列表，我需要使用 jQuery 或 javascript 来执行此操作。是否有任何已知的组件可以做到这一点？我需要从头开始写吗？如果我这样做了，我该怎么做呢？

Answer 1

我建议使用jQuery.parseXML() 将 XML 转换为 jQuery 对象，然后遍历该对象以填充可观察对象的剔除可观察数组。有关如何使用敲除进行动态绑定的示例，请参见http://knockoutjs.com/ 。我会使用一个无序列表来渲染每个带有标题和链接的图像。您可以根据需要为列表设置样式。

浏览到 knockout.js 教程 - http://learn.knockoutjs.com/#/?tutorial=collections Nd 在您的 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>