1

私は 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/に置きました

4

1 に答える 1

1

NumberのプロパティにアクセスするときselectedOfは、最初に のような引数なしの関数として呼び出して、オブザーバブルの値を取得する必要がありますselectedOf().Number。

ただし、データが入力される前にこれを行うと、未定義の値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または、null から保護する値に対して計算されたオブザーバブルを作成するか、次のようにバインドすることもできますdata-bind="text: selectedOf() ? selectedOf().Number : 'none'"

于 2012-08-23T14:59:59.610 に答える