Javascript 如何更新colorbox中的基础数据？_Javascript_Colorbox_Knockout.js

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

javascript knockout.js

Javascript 如何更新colorbox中的基础数据？,javascript,colorbox,knockout.js,Javascript,Colorbox,Knockout.js,我正在尝试将knockout.js和colorbox结合在一个照片库中我在一个可观察阵列中拥有所有照片，代码如下所示： <script type='text/javascript> function Photo(src, comment) { this.image = src; this.comment = ko.observable(comment); } var view_

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

我认为，与其使用jquery模板，不如使用Knockout 1.3和新的foreach绑定：




&mdash；制造者



它基本上只是复制父节点下的节点，因此您不需要使用模板，除非它更复杂
正确的是，您正在使用的jquery模板实现重新创建了节点，这可能会杀死colorbox，我认为新的foreach实现应该让节点保持原位，并且工作得更好
如果失败了，您可能需要编写自己的自定义淘汰绑定或其他东西来将列表绑定到colorbox
<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>