Question

我正在尝试将knockout.js和colorbox结合在一个照片库中。

我将所有照片放在一个可观察的数组中，代码看起来像这样：

    <script type='text/javascript>
        function Photo(src, comment) {
            this.image = src;
            this.comment = ko.observable(comment);
        }

        var view_model = {
            photos: ko.observableArray([
                new Photo('/gallery/img1.jpg', 'Some comment'),
                new Photo('/gallery/img2.jpg', 'Some other comment'),
                new Photo('/gallery/img3.jpg', '')
            ]),
            current_photo: ko.observable()
        };

        $(document).ready(function(){
            $('ul#gallery').colorbox({href: '#photo-detail'});
        });
    </script>

    <script id='photoTemplate' type='text/html'>
        <li>
            <img src='{{src}}' />
            <div>{{comment}}</div>
        </li>
    </script>

    <body>
        <ul id='gallery' data-bind='template: "photoTemplate, foreach:photos"'</ul>

        <div style='display: none'>
            <div id='photo-detail'>
                <img data-bind='attr: { src: current_photo().src }'/>
                <input type="text" data-bind='value: current_photo().comment'/>
            </div>
        </div>
    </body>

当加载新图像时，我在colorbox的事件处理程序中更新current_photo。一切正常，直到我编辑评论。

似乎淘汰赛删除了DOM元素，并将其替换为新元素，因此当移动到下一张照片然后再返回时，colorbox会出错。如果我关闭colorbox并重新初始化，它会再次起作用。

有没有办法更新colorbox的数据而不关闭它？

Answer 1

我认为不使用jquery模板，只需使用Knockout 1.3和新的foreach绑定：

http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/

<ul data-bind="foreach: products">
    <li>
        <strong data-bind="text: name"></strong>
        <em data-bind="if: manufacturer">
            &mdash; made by <span data-bind="text: manufacturer.company"></span>
        </em>
    </li>
</ul>

它基本上只是重复父项下面的节点，所以你不需要使用模板，除非它更复杂。

你是正确的，你正在使用的jquery模板实现重新创建可能杀死colorbox的节点，我认为新的foreach实现应该让节点保持原状并且工作得更好。

如果失败了，你可能不得不编写自己的自定义挖空装订或将列表绑定到彩盒的东西。

如何更新colorbox中的基础数据？

1 个答案: