ko是什么?在这种情况下观察到的

Question

那么ko.observable()到底在做什么呢?情况是这样的。如你所见，我有一个布尔值ko.observable()。我有点击设置为该值，所以它应该切换true的值false包含在它的方法调用。

当我看到数组在开发人员工具中填充时，我看到selected不= true或false，而是=一个相当广泛的函数，我找不到其中的任何地方的true或false值，所以我不知道当ko.observable()被使用时到底发生了什么

我期望的是for tab。选择为tabArray[tab]的值。选中，当页面加载时，这是正确的。但是，单击后，tabArray[tab]。当文本值被写入时，selected = [Object Object]。我尝试使用:

<pre data-bind="text: JSON.stringify(ko.toJS(tab.selected)"></pre>

(在这里找到:http://www.knockmeout.net/2013/06/knockout-debugging-strategies-plugin.html)，打印出true或false，我需要为我需要该值的其他地方这样做吗?因为我不确定具体是什么。Observable正在做。

define(['knockout', 'text!../Content/SSB/PartialViews/MainContent.html'], function (ko, MCTemplate) {
    ko.components.register('MainContent', {
        template: MCTemplate
    });
    var MainViewModel = {
        tabArray: [
                { name: 'bob', selected: ko.observable(true) },
                { name: 'bib', selected: ko.observable(false) },
                { name: 'bab', selected: ko.observable(false) },
                { name: 'bub', selected: ko.observable(false) },
                { name: 'beb', selected: ko.observable(false) },
        ]
    };
    ko.applyBindings(MainViewModel);
    return {
        viewModel: MainViewModel
    }
});

HTML

<div id="tab">
    <ul class="nav nav-tabs" role="tablist">
        <!--ko foreach: {data: $parent.tabArray, as: 'tab'}-->
            <li data-bind="click: tab.selected, css: { 'active': tab.selected}">        
                    <a data-bind="attr: {href: '#' + tab.name}, text: name"></a>
                <div data-bind="text: tab.name"></div>
                <div data-bind="text: tab.selected"></div>
            </li>
        <!--/ko-->
    </ul>
    <!--ko foreach:  {data: $parent.tabArray, as: 'tab'}-->
    <div class="ui-tabpanel" role="tabpanel"  data-bind="visible: tab.selected">
        <p data-bind="text: name"></p>
    </div>
    <!--/ko-->
</div>

Answer 1

click绑定调用提供的函数，将当前视图模型(也称为$data)传递给它。这就是为什么你看到[Object object]是点击后的可观察值。因为你希望点击来切换可观察对象，所以你需要创建一个函数来完成这个任务。一种简洁的方法是通过自定义绑定，我将其命名为toggle:

ko.bindingHandlers.toggle = {
    init: function(element, valueAccessor) {
        ko.utils.registerEventHandler(element, 'click', function () {
            var obs = valueAccessor();
            obs(!obs());
        });
    }
};

现在您使用toggle而不是click绑定:<li data-bind="toggle: tab.selected...