Html 在foreach中滚动淘汰div

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

如何使用knockout进行此操作

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>

价格：
productName1:
点击这里

---

注意：autocompleteData是ko。observableArray（[]）

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

。你好{
高度：50px；
}

你好
添加到阵列

hi。。如何解决以前的错误？span标记中存在括号syntex问题。谢谢你的帮助+请帮我解决这个问题。你能解决这个问题吗？写下答案：）滚动条显示成功。但是，我只想垂直滚动条。当前，它是水平显示滚动条。当单击“单击此处”按钮时，您知道如何获取所有父值吗？是的。。使用$parent。（无论您希望从parent获得什么项目）我希望在js文件中获得该值。单击此处，以便在myCustom函数中获取。确定。。你能给我举一个你想买什么样的东西的例子吗？