Question

我觉得我几乎就在那里，但我一直在圈子里奔跑。我正在运行2个循环，一个用于标签，另一个用于标签内容。它循环很好，但现在我需要在加载时使正确的那些处于活动或非活动状态。

<div id="tab">
    <ul class="nav nav-tabs" role="tablist">
        <!--ko foreach: $parent.tabArray-->         
            <li data-bind="click: toggleActive(init), css: init ? 'active': ''">
                <a data-bind="attr: {href: '#' + name}, text: name"></a>
            </li>

        <!--/ko-->
    </ul>
</div>

我尝试使用这个toggleActive（init）函数（init是数组中对象的布尔值），并切换该值。然后使用内联布尔条件来判断此元素是否具有css类'active'。这不能正常运作。有什么想法吗？

    var tabSetUp = function () {
        ko.components.register('MainContent', {
            template: MCTemplate
        });

        var self = this;

        self.toggleActive = function (clicked) {
         if (clicked) {
            return false;
         }
        else {
            return true;
        }
      }
    }
    tabSetUp();

//example of my array
    var MainViewModel = {
        tabArray: [
                { name: 'bob', init: true },
                { name: 'bib', init: false },
                { name: 'bab', init: false },
                { name: 'bub', init: false },
                { name: 'beb', init: false },
        ]
    };

Answer 1

最简单的方法是使用一个可存储活动标签的observable。

<!--ko foreach: tabArray-->         
    <li data-bind="click: $parent.toggleActive, css: $parent.selectedTab() == $data ? 'active': ''">
        <a data-bind="attr: {href: '#' + name}, text: name"></a>
    </li>
<!--/ko-->

然后单击选项卡时，使用click绑定。默认情况下，循环中的项目将基于参数，在本例中为选项卡。然后，您可以使用css绑定来检查活动选项卡是否等于循环中的选项卡。 $ data将成为循环中的标签：

toggleTab

然后self.toggleActive = function (tab) { self.selectedTab(tab); };函数将设置活动标签：

{{1}}

JsFiddle

Answer 2

您必须在代码中进行一些更改。

var MainViewModel = {
        tabArray: [
                { name: 'bob', init: true },
                { name: 'bib', init: false },
                { name: 'bab', init: false },
                { name: 'bub', init: false },
                { name: 'beb', init: false },
        ],
        toggleActive: function (clicked) {
            alert(clicked);
        }
 };

ko.applyBindings(MainViewModel);

如果要将参数化函数绑定到click，则必须使用click: function () { yourFunction(yourParameter); }

HTML

<ul class="nav nav-tabs" role="tablist">
     <!--ko foreach: tabArray-->         
         <li data-bind="click: function() { $root.toggleActive(init) }, css: init ? 'active': ''">
             <a data-bind="attr: {href: '#' + name}, text: name"></a>
         </li>
      <!--/ko-->
 </ul>

工作示例https://jsfiddle.net/qm9ukac5/

淘汰JS标签，切换活动

2 个答案: