Question

我一直试图解决这个问题几天，但无法使其发挥作用。在我们运营的一些电子商务网站上取代旧的闪存品牌 - 我们卖得像旗帜一样，对于Javascript和适合移动设备的解决方案，我正试图赶上这个要求：

通过AJAX（已完成）获取品牌列表和设置（即每张幻灯片的最大项目数。）
使用bootstrap carousel（已完成）。
动态轮播内容呈现，使用Knockout

问题在于后者，因为我找不到一种方法来绘制每张幻灯片的内容。在this SO question (with jsfiddle companion)中可以看到我正在尝试实现的非动态渲染（基于直接的HTML）。

我遇到了KO foreach绑定的麻烦，为了每张幻灯片渲染多个项目。

以下代码的一些见解......

品牌：品牌结构列表。 observableArray，包含代表品牌（name，image-url等）的不可观察结构
$ parent.isFirst（）：如果必须绘制新幻灯片，则返回每个幻灯片的最大项目数
$ parent.defineItemClass：返回幻灯片的类（它只标记第一个带有'有效项'，其余只有'项'
$ parent.drawTail：告知是否必须绘制所包含的html

模板......

<script type="text/html" id="brand-widget-template">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="carousel slide" id="brands-carousel">
            <div class="carousel-inner" data-bind="foreach: brands">
                <!-- ko if: $parent.isFirst() -->
                <div data-bind="css: $parent.defineItemClass($index)">
                    <ul class="thumbnails">
                <!-- /ko -->
                    <li class="span1">
                        <div class="caption">
                            <h5 data-bind="text: Name"></h5>
                        </div>
                        <div class="thumbnail">
                            <img src="#" alt="">
                        </div>
                    </li>
                <!-- ko if: $parent.drawTail() -->
                    </ul>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

我必须对渲染完成的方式有误解。在调试中，我注意到$ parent.drawTail，永远不会被调用。有什么想法吗？

这是a fiddle on wich I isolated the most important pieces from the project。

谢谢！路易

Answer 1

我认为最好有一个计算的observable将主列表分解为嵌套列表，这样你就可以为每个循环使用嵌套。这会将视图逻辑放回视图模型中，而不是将其放在模板中。

对于视图模型来说是这样的：

 self.brands_in_fours = ko.computed(function () {
        var outer_array = [];

        _.each(self.brands(), function (item, index) {
            if (index % 4 == 0) {
                outer_array.push(ko.observableArray([item]));
            } else {
                outer_array[outer_array.length - 1]().push(item);
            }
        });
        return outer_array;
    });

（我使用underscore.js循环遍历self.brands数组）

模板：

<div class="carousel-inner" data-bind="foreach: brands_in_fours">
    <div class="item" data-bind="css: {'active': $index()==0}">
        <ul data-bind="foreach: $data">
            <li class="span3">
                <div class="caption">
                    <h5 data-bind="text: Name"></h5>
                </div>
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="" />
                </div>
            </li>
        </ul>
    </div>
</div>

另外我认为你在第一个元素上添加'active'类过于复杂 - 你可以检查索引并添加它，如果它等于0。

我附上了jsfiddle

每个幻灯片旋转木马动态加载多项目与Knockout和Bootstrap

1 个答案: