ko.observable 在这种情况下实际上在做什么？答案

【问题标题】：What is the ko.observable actually doing in this situation?ko.observable 在这种情况下实际上在做什么？
【发布时间】：2015-11-14 07:40:48
【问题描述】：

那么 ko.observable() 到底在做什么呢？这是情况。如您所见，我有一个布尔值 ko.observable()。我已单击设置为该值，因此它应该切换其方法调用中包含的 true false 的值。

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

我期望 tab.selected 是 tabArray[tab].selected 的值，当页面加载时，这是正确的。但是，点击后，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）并且打印出真假，我是否需要在需要该值的其他地方执行此操作？因为我不确定 ko.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>

【问题讨论】：

Knockout observables 是可用于获取/设置支持值的函数。尝试tab.selected() 而不是tab.selected。我使用Knockout-ES5 shim 来解决此问题。
如果你想读取一个 observable，你应该像对待方法/函数一样使用() 约定。

标签： javascript knockout.js

【解决方案1】：

click 绑定调用提供的函数，将当前视图模型（也称为$data）传递给它。这就是为什么您在单击后将 [Object object] 视为 observable 的值。由于您希望单击来切换可观察对象，因此您需要创建一个函数来执行此操作。一个不错的、干净的方法是通过自定义绑定，我称之为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...

【讨论】：