Question

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

Answer 1

我建议使用jQuery.parseXML()将XML转换为jQuery对象，然后遍历该对象以填充可观察对象的挖掘可观察数组。有关如何使用knockout进行动态绑定的示例，请参阅http://knockoutjs.com/。我将使用无序列表来呈现带有标题和链接的每个图像。您可以按照自己想要的方式设置列表样式。

浏览你的javascript中的knockout.js教程 - http://learn.knockoutjs.com/#/?tutorial=collections Nd，添加：

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>

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

1 个答案: