Question

我尝试输出到dom data-bind =“text：row.state（）”并且不起作用。我不相信这个问题与json.stringify有关，它只是作为一个事实的例子，这些值对于html中的ko foreach是不可见的

thing = {
            id: 3,
            bool: ko.observable(false),
            state: ko.observable('disabled')
        }

我正在尝试在更大的应用程序中调试某些东西，我正在尝试做一个关于我的应用程序如何破坏的简单示例，我甚至无法获得我的基本对象属性来显示起来。

我的2个ko.observable属性在哪些行中的每个对象？当我尝试使用“row.state（）”时，它不存在，它不存在，正如你可以在dom中的字符串化“文本”中看到的那样。

请注意。

Answer 1

可观察者就在那里 - 只是你在包含它们的对象上使用JSON.stringfy。这将排除函数并仅序列化POJO（普通旧JavaScript对象）。

Jamiec指出，每个可观察对象实际上都是函数，因此它们的内容不会被序列化。

因此，对于您序列化的每个方框：

  thing = {
        id: 1,
        bool: ko.observable(false),
        state: ko.observable('disabled')
    },
    thing = {
        id: 2,
        bool: ko.observable(false),
        state: ko.observable('disabled')
    },
    thing = {
        id: 3,
        bool: ko.observable(false),
        state: ko.observable('disabled')
    }

唯一可能的输出是3 ID。

如果将对象转换为普通的JavaScript对象，以便这些属性不再是函数，那么它将按预期序列化：

＆＃13;

var viewModel = {
	
    toggle: function (row) {
        row.bool(!row.bool);
    },
    displayState: function(row){
        
     	if(row.bool()){
            row.state('enabled');
        }   else{
            row.state('disabled');
        }
        console.log(row.state);
    },
    rows: [
        thing = {
            id: 1,
            bool: ko.observable(false),
            state: ko.observable('disabled')
        },
        thing = {
            id: 2,
            bool: ko.observable(false),
            state: ko.observable('disabled')
        },
        thing = {
            id: 3,
            bool: ko.observable(false),
            state: ko.observable('disabled')
        },
    ],

    tabs: [
        tab = 'tab1',
        tab ='tab2',
        tab = 'tab3'

    ],
}

ko.applyBindings(viewModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!--ko foreach: {data: tabs, as: 'tab'} -->

<div class="nav nav-tabs">
    <p>This is <span data-bind='text: tab'></span>
    </p>
</div>
    <!--ko foreach: {data: $root.rows, as: 'row'}-->
    <button class="btn btn-default" data-bind="text: JSON.stringify(ko.toJS($root.rows)), click: function(){$root.toggle(row)}"></button>
    <!--/ko-->
<!--/ko-->

＆＃13;

请注意，foreach中的观察结果完全可见，如下面的代码段所示。正如我们所讨论的那样，您无法看到它们的原因是因为序列化。此示例显示如何仅通过显示段落元素来使用它们：

＆＃13;

var viewModel = {
	
    toggle: function (row) {
        row.bool(!row.bool);
    },
    displayState: function(row){
        
     	if(row.bool()){
            row.state('enabled');
        }   else{
            row.state('disabled');
        }
        console.log(row.state);
    },
    rows: [
        thing = {
            id: 1,
            bool: ko.observable(false),
            state: ko.observable('enabled')
        },
        thing = {
            id: 2,
            bool: ko.observable(false),
            state: ko.observable('disabled')
        },
        thing = {
            id: 3,
            bool: ko.observable(false),
            state: ko.observable('disabled')
        },
    ],

    tabs: [
        tab = 'tab1',
        tab ='tab2',
        tab = 'tab3'

    ],
}

ko.applyBindings(viewModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!--ko foreach: {data: tabs, as: 'tab'} -->

<div class="nav nav-tabs">
    <p>This is <span data-bind='text: tab'></span>
    </p>
</div>
    <!--ko foreach: {data: $root.rows }-->
    <button class="btn btn-default" data-bind="text: id"></button>
<p data-bind="text: state"></p>
    <!--/ko-->
<!--/ko-->

＆＃13;

Answer 2

state可观察的，只是你输出数据的方式隐藏了它们

您可以通过更新按钮上的绑定来看到这一点：

<button class="btn btn-default" data-bind="text: row.state, click: function(){$root.toggle(row)}"></button>
-------------------------------------------------^ here

http://jsfiddle.net/bkj37mzu/12/

你还应该知道，当你获得或设置一个可观察量的值时，就像你在调用一个函数一样，所以

row.bool = !row.bool;

应该是

row.bool(!row.bool())

（H / T：@CrimsonChris）

您设置state的某些方式也是如此。总之，在解决了所有问题之后，我认为这个小提琴做了你想要做的事情

http://jsfiddle.net/bkj37mzu/21/

我的ko.observable属性在哪里？

2 个答案: