0

画像のリストを返す Web サービスがあります。これは、ユーザーが XML 形式でこれらの画像をクリックしたときにリダイレクトする必要があるタイトルと URL です。水平方向に配置されたこれらのクリック可能な画像の動的リストを作成する必要があり、jQuery または JavaScript を使用してこれを行う必要があります。これを行う既知のコンポーネントはありますか? 最初から書く必要がありますか？もしそうなら、どうすればいいですか？

4

1 に答える 1

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>
于 2012-12-15T23:35:57.073 に答える