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

在div的style绑定之外使用div中的foreach绑定，并检查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>

淘汰赛div在foreach中滚动

1 个答案: