0

ギャラリーリストがあります：

 <div class="gallery">
            <a href="#" class="next">next</a>
            <a href="#" class="prev">prev</a>

            <div class="frame">
                <ul data-bind="foreach: designs">
                    <li>
                        <span class="text">№&lt;span data-bind="text: getID()"></span> <span data-bind="text: getName()"></span></span>
                         <img src="images/img01.jpg" width="182" height="102" alt="image description"/>
                    </li>
                </ul>
            </div>

  </div>

JS

Models.Design = function () {...}

function ViewModel(){   
    this.designs = ko.observableArray();


    this.addDesign = function (_id, _name, _image, _video) {

        var design = new Models.Design;

        design.setID(_id);
        design.setName(_name);

        this.designs.push(design);
   };

   this.addDesign(1, "Image 1");
   this.addDesign(2, "Image 1");
   this.addDesign(3, "Image 1");
 // at this moment there is no elements in DOM
}

質問：$('.gallery').galleryScroll();ギャラリースライダーを更新するためにどこに書き込む必要がありますか？

4

2 に答える 2

3

オブザーバブルを購読するだけです。コレクションへの目に見える*変更に対して、コールバックが呼び出されます。

function ViewModel() {
    this.designs = ko.observableArray();
    this.designs.subscribe(function () {
        $('.gallery').galleryScroll();
    });

    // ...
}

* 可視とは、基になる配列に対して直接ではなく、オブザーバブルに対して操作を実行することを意味します。

于 2013-02-03T21:29:16.820 に答える
0

私は解決策を見つけました：

ko.bindingHandlers.gallery = {
    update: function(element, valueAccessor) {
        setTimeout(function() {
            $(element).parents('.gallery').galleryScroll();
        });
    }
};

 <ul data-bind="foreach: designs, gallery:{}">
     <li>....</li>
 </ul>
于 2013-02-03T19:42:42.710 に答える