Question

在我的页面中，使用knockout绑定数据。通过使用条件隐藏/显示li部分。

<ul>
    <li data-bind="visible: condition1()">
        <span> 1> Some Text</span>      
    </li>
    <li data-bind="visible: condition2()">
        <span> 2> Some Text</span>
    </li>
    <li data-bind="visible: condition3()">
        <span> 3> Some Text</span>
    </li>
    <li data-bind="visible: condition4()">
        <span> 4> Some Text</span>
    </li>
</ul>

在跨度中，索引号将根据条件而变化。我需要根据可见性和递增顺序对索引进行编号。我设法通过使用一个将在conditions（）中递增的变量来解决这个问题。

var modal = {
  data: ko.observable(null),
    indexNumber: 0,
    condition1: function() {
        ++indexNumber;
        return true;
    },
    condition2: function() {
        return false;
    },
    condition3: function() {
        ++indexNumber;
        return true;
    },
    condition4: function() {
        return false;
    }
}

然后将html更改为，

<ul>
    <li data-bind="visible: condition1()">
        <span> <!-- ko text: indexNumber --><!-- /ko -->> Some Text</span>      
    </li>
    <li data-bind="visible: condition2()">
        <span> <!-- ko text: indexNumber --><!-- /ko -->> Some Text</span>
    </li>
    <li data-bind="visible: condition3()">
        <span> <!-- ko text: indexNumber --><!-- /ko -->> Some Text</span>
    </li>
    <li data-bind="visible: condition4()">
        <span> <!-- ko text: indexNumber --><!-- /ko -->> Some Text</span>
    </li>
</ul>

现在问题已解决，但这个问题是否有效解决方案？或者这个问题在ko中是否有任何内置属性？

Answer 1

您可能只想使用有序列表：

编辑：对于列表编号的样式/格式，您可以使用css。

＆＃13;

ko.applyBindings({});

＆＃13;

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
}

li:before {
  content: counter(myCounter) "> ";
  counter-increment: myCounter;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ol>
    <li data-bind="visible: true">
        <span>Some Text</span>      
    </li>
    <li data-bind="visible: false">
        <span>Some Text</span>
    </li>
    <li data-bind="visible: true">
        <span>Some Text</span>
    </li>
    <li data-bind="visible: false">
        <span>Some Text</span>
    </li>
</ol>

＆＃13;

如何在显示/隐藏部分中将索引编号设置为递增

1 个答案: