1

jquery ieのようなことをする簡単な方法はありますか

$('#image-gallery li:nth-child(3)').addClass('third-image-child')

しかし、ノックアウトのコンテキストでは、私はノックアウトにまったく慣れていませんが、非常に単純であるように思われることを行う簡単な方法を見つけることができないようです? 観測可能な配列で3番目の項目を見つけてクラスを追加することに関係があるのではないかと思いましたが、構文がわかりません。ヘルプ？？！

私のモデルは以下のとおりです。これは単純なページネーション モデルで、9 つのアイテムをロードし、次と前のボタンがあります。とりあえず、テスト用に 100 個のアイテムを生成する単純な関数を追加しました。 

members.DisplayGallery = function(jsondata) {
                    var viewModel = {
                        fields: ko.observableArray(jsondata),
                        pageSize: ko.observable(9),
                        pageIndex: ko.observable(0),
                        previousPage: function() {
                            this.pageIndex(this.pageIndex() - 1);
                        },
                        nextPage: function() {
                            this.pageIndex(this.pageIndex() + 1);
                        }
                    };



                    viewModel.maxPageIndex = ko.dependentObservable(function() {
                        return Math.ceil(this.fields().length / this.pageSize()) - 1;
                    }, viewModel);


                    viewModel.pagedImages = ko.dependentObservable(function() {
                        var size = this.pageSize();
                        var start = this.pageIndex() * size;
                        return this.fields.slice(start, start + size);
                    }, viewModel);


                  ko.applyBindings(viewModel, $('#image-gallery')[0]);
                };


                $(function() {
                    var data = [];
                    for (var i = 0; i < 100; i++) {
                        data.push({
                            imageLink: "http://sample-image.jpg",  
                            imagePageLink: "http://",
                            imageTitle: "Title here" + i,
                            userFullName: "Name" + i,
                            imageDate: "Description" + i
                        })
                    }

                    members.DisplayGallery(data);
                  });

マークアップ:

<ul data-bind="foreach: pagedImages" id="image-gallery">
                        <li>
                               <div class="image-thumb" data-bind="style: { backgroundImage: 'url(' + imageLink +')'}">
                                                            <a class="image-thumb-link" data-bind="attr: { href: imagePageLink}" href="gallery-single.html"></a>
                                                        </div>
                                                        <div class="image-text">
                                                            <a data-bind="attr: { href: imagePageLink}" href="gallery-single.html"><span class="image-title" data-bind="text: imageTitle"></span></a><br />
                                        <span data-bind="text: userFullName">Username</span><br />
                                     <span data-bind="text: imageDate">Image Date</span>
         </div>
    </li>
</ul>
4

1 に答える 1

8

foreach bindingを使用して監視可能な配列にバインドする場合、 context プロパティを使用して、次のように 3 番目の要素ごとにクラスを設定できます。$index

<li data-bind="css: { 'third-image-child': $index() % 3 == 0 }">
    ...
</li>
于 2012-09-27T16:49:07.243 に答える