Question

那么ko.observable（）究竟在做什么？这是情况。你可以看到我有一个布尔ko.observable（）。我已将click设置为该值，因此它应该切换其方法调用中包含的true false的值。

当我看到在开发人员工具中填充数组时，我看到所选的不是= 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）并打印出true或false，我是否需要为需要该值的其他地方执行此操作？因为我不确定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>

Answer 1

click绑定调用提供的函数，并将当前视图模型（也称为$data）传递给它。这就是为什么你在点击后看到[Object object]作为observable的值。由于您希望单击以切换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...

进行绑定

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

1 个答案: