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

发布于 2024-12-12 22:23:13 字数 1548 浏览 2 评论 0 原文

我正在尝试将 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>

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

看起来淘汰赛删除了 DOM 元素，并用新元素替换它，因此当移动到下一张照片然后再次返回时，颜色框会出现错误。如果我关闭 colorbox 并重新初始化，它会再次工作。

有没有办法在不关闭它的情况下更新 colorbox 的数据？

原文

I am trying to combine knockout.js and colorbox in a photo-gallery.

I have all photos in an observable array, and the code looks something like this:

    <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>

I update current_photo in the event-handler for colorbox, when a new image loaded. Everything works until i edit a comment.

It seems like knockout removes the DOM-element, and replaces it with a new, so when moving to next photo and then back again, colorbox bugs out. If i close colorbox and reinitialize, it works again.

Is there a way to update the the data for colorbox, without closing it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眼泪 2024-12-19 22:23:13

我认为不使用 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">
            — made by <span data-bind="text: manufacturer.company"></span>
        </em>
    </li>
</ul>

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

你是正确的，你正在使用的 jquery 模板实现重新创建了可能会杀死 colorbox 的节点，我认为新的 foreach 实现应该将节点保留在适当的位置并且工作得更好。

如果失败，您可能必须编写自己的自定义剔除绑定或其他东西来将列表绑定到颜色框。

I think instead of using the jquery template, just use Knockout 1.3 and the new foreach binding:

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">
            — made by <span data-bind="text: manufacturer.company"></span>
        </em>
    </li>
</ul>

It basically just duplicates the nodes underneath the parent, so you don't need to use the templating unless its much more complicated.

You are correct that the jquery template implementation you are using recreates the nodes which probably kills the colorbox, I think the new foreach implementation should leave the nodes in place and work better.

If that fails though you may have to write your own custom knockout binding or something to bind a list to colorbox.

回复收藏 0 原文

~没有更多了~