淘汰赛div在foreach中滚动

Question

我是淘汰赛的新手。如果 foreach 包含超过 5 个数组，我想这样做，那么在 div 中应该应用垂直滚动，否则应该删除滚动。

如何使用淘汰赛来做到这一点？

HTML：

<div class="temp-autocomplete-suggestions">
    <!-- ko foreach: autocompleteData -->
     <div class="temp-pro-autocomplete-suggestion" data-index="text: $index">
        <div class="temp-pro-suggest-pro-img">
            <img class="temp-pro-img-responsive" data-bind="attr: {src:imageUrl}" alt="">
        </div>
        <div class="temp-pro-suggest-pro-data">
            <div class="product-line product-name">
                <a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName1"></span></a>
            </div>
            <div class="product-line product-price">Price: <span data-bind="value:productPrice"></span></div>
            <div class="product-des">
                <p class="short-des" data-bind="attr : {id:productName1}">ProductName1: <span data-bind="text:productName1"></span></p>
            </div>
        </div>
        <div class="temp-pro-additem">
            <button id="temp-pro-search-item-list" class="temp-pro-materialize-btn">Click Here</button>
        </div>
    </div>
    <!-- /ko -->
</div>

注意：autocompleteData 是 ko.observableArray([])

Answer 1

在foreach 绑定之外的div 中使用style 绑定，并检查autocompleteData 的长度。

<div class="temp-autocomplete-suggestions" 
     data-bind="style: { overflowY: autocompleteData().length > 5 ? 'scroll' : 'auto', 
                         height: autocompleteData().length > 5 ? '300px': 'initial' }">
    <!-- ko foreach: autocompleteData -->
     <div class="temp-pro-autocomplete-suggestion" data-index="text: $index">
        <div class="temp-pro-suggest-pro-img">
            <img class="temp-pro-img-responsive" data-bind="attr: {src:imageUrl}" alt="">
        </div>
        <div class="temp-pro-suggest-pro-data">
            <div class="product-line product-name">
                <a data-bind="attr: {href:productUrl}" target="_blank"><span data-bind="text:productName1"></span></a>
            </div>
            <div class="product-line product-price">Price: <span data-bind="value:productPrice"></span></div>
            <div class="product-des">
                <p class="short-des" data-bind="attr : {id:productName1}">ProductName1: <span data-bind="text:productName1"></span></p>
            </div>
        </div>
        <div class="temp-pro-additem">
            <button id="temp-pro-search-item-list" class="temp-pro-materialize-btn">Click Here</button>
        </div>
    </div>
    <!-- /ko -->
</div>

示例（查看完整页面视图）：

var viewModel = function(){
    var self = this;
    self.autocompleteData = ko.observableArray();
    self.addData = function(){
        self.autocompleteData.push({});
    };

};

ko.applyBindings(new viewModel());

.hello {
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="temp-autocomplete-suggestions" 
     data-bind="style: { overflowY: autocompleteData().length > 5 ? 'scroll' : 'auto', height: autocompleteData().length > 5 ? '300px': 'initial' }">
<!-- ko foreach: autocompleteData -->
<div class="hello">Hello</div>
<!-- /ko -->
</div>

<button data-bind="click: addData">Add to Array</button>