Question

我是KnockoutJS的新手，我遇到了一些问题。

我不明白为什么 selectedOf 在点击后没有更新。

有人能发现我做错了吗？

<div>
    <ul data-bind="foreach: Ofs">
        <li data-bind="text: Number, click: $root.selectOf" style="cursor:pointer"/>
    </ul>
    <strong>Item clicked: </strong><span data-bind="text: selectedOf.Number" />
</div>

<script type"text/javascript">
    var OfsModel = function (initialData) {
        //console.log(initialData);
        var self = this;
        self.CurrentState = ko.observable(initialData.CurrentState);
        self.Ofs = ko.observableArray(initialData.Ofs);
        self.selectedOf = ko.observable();

        self.selectOf = function (of) {
            //console.log(of);
            self.selectedOf(of);
            //console.log(self.selectedOf());
        }
    }

    var initialData = '{"Ofs":[{"Client":"A","Number":"1","Qty":10,"QtyRejected":5,"StopReason":"","ModifiedOn":"\/Date(1345732172456)\/","IsHighlighter":false,"SequencesAvailable":[{"Id":1,"Name":"Seq1"},{"Id":2,"Name":"Seq2"},{"Id":3,"Name":"Seq3"}],"SelectedSequence":null},{"Client":"B","Number":"2","Qty":20,"QtyRejected":0,"StopReason":"too much work","ModifiedOn":"\/Date(1345732172457)\/","IsHighlighter":false,"SequencesAvailable":[{"Id":1,"Name":"Seq1"},{"Id":2,"Name":"Seq2"}],"SelectedSequence":null},{"Client":"C","Number":"3","Qty":30,"QtyRejected":0,"StopReason":"","ModifiedOn":"\/Date(1345732172457)\/","IsHighlighter":false,"SequencesAvailable":[{"Id":1,"Name":"Seq1"}],"SelectedSequence":null}],"CurrentState":""}';

    var vw = $.parseJSON(initialData);
    ko.applyBindings(new OfsModel(vw));
</script>

编辑：我把代码放在http://jsfiddle.net/muek/KBeZ3/2/

上

Answer 1

当您从Number访问selectedOf属性时，您需要首先通过将其视为不带selectedOf().Number之类的参数的函数来获取observable的值。 / p>

但是，如果在填充selectedOf之前执行此操作，则会尝试从未定义的值访问Number时出错。

一个很好的解决方法是使用with绑定之类的东西来设置元素子节点的范围。它还可以防止null。这看起来像是：

<div data-bind="with: selectedOf">
    <strong>Item clicked: </strong><span data-bind="text: Number" />
</div>

以下是一个示例：http://jsfiddle.net/rniemeyer/ecDgD/

或者，您可以为Number值创建一个计算的observable来保护null或绑定data-bind="text: selectedOf() ? selectedOf().Number : 'none'"

所选项目不起作用KnockoutJS

1 个答案: