0

診断コードの配列を持つビューモデルがあります。私のhtmlには、空の診断コードを配列に追加するクリックにデータバインドされたボタンがあります。これはすべて機能します。

ボタンを使用して診断コードを追加します。これは機能します。

外部ソースから JSON を受け取り、オブザーバブルにラップしようとしています。外部ソースからのものであるため、バインドできる関数がないため、viewModel の一部ではない関数にバインドしています。

オブジェクトを JSON 文字列に変換しようとすると、新しい診断コードは空の文字列になります (新しいコードを追加するときに追加する既定値)。

コードは次のとおりです。

 <h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3>
    <div data-bind="foreach:DiagnosisCodes">
        <div><input type="text"  data-bind="value:$data"/><input type="button" value="Remove" data-bind="click: function(data, event) { RemoveDiagnosisCode($parent, data, event) }"/>
        </div>
    </div>

    <script type="text/javascript">
        function AddDiagnosisCode(item)
        {
            item.DiagnosisCodes.push("");
        }

        function RemoveDiagnosisCode(item, code) {
            item.DiagnosisCodes.remove(code);
        }

        function submitJSON() {
            var test= ko.mapping.toJSON(viewModel); // have also tried ko.toJSON(viewModel)
            alert(test);
        }

        var vm = {
           "DiagnosisCodes": ["2345","6789"]
        };

        var viewModel = ko.mapping.fromJS(vm);     
         ko.applyBindings(viewModel);
    </script>

たとえば、[追加] をクリックしてコード ABCD を入力し、submitJSON を呼び出すと、次のように表示されます。

{
    DiagnosisCodes:["2345","6789",""]
}

私は期待している

{
    DiagnosisCodes:["2345","6789","ABCD"]
}

更新: マッピング プラグインは、単純な型 (文字列、int など) の配列を observableArrays ではなく observables に変換するようです。そこで、マッピングを呼び出す前に、javascript を (pax の助けを借りて) 文字列配列を文字列を保持するオブジェクトの配列に変換するように変更しました。次に、JSON に変換するときに、それらを元に戻します。

<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3>
    <div data-bind="foreach:DiagnosisCodes">
        <div><input type="text"  data-bind="value:code"/><input type="button" value="Remove" data-bind="click: $root.RemoveDiagnosisCode"/>
        </div>
    </div>
<button onclick="submitJSON()">Show</button>

function submitJSON() {
            //convert to JS object first
            var test= ko.mapping.toJS(viewModel);
            UnMapCodes(test);

            alert(ko.toJSON(test));
        }

           function Code(code)
        {
            var self=this;
            self.code = code;
        }

        function MapToCodes(obj)
        {
            var codes=[];

            for(var c=0; c<obj.DiagnosisCodes.length; c++)
            {
                codes.push(new Code(obj.DiagnosisCodes[c]));
            }

            obj.DiagnosisCodes=codes;
        }

        function UnMapCodes(obj)
        {
            var codes=[];

            for(var c=0; c<obj.DiagnosisCodes.length; c++)
            {
                codes.push(obj.DiagnosisCodes[c].code);
            }

            obj.DiagnosisCodes=codes;
        }


        var vm = {            
           "DiagnosisCodes": ["2345","6789"]
        };

        vm.AddDiagnosisCode= function (item)
            {
                self=this;
                self.DiagnosisCodes.push(new Code(""));
            };
        vm.RemoveDiagnosisCode= function (code) {
                self=this;
                self.DiagnosisCodes.remove(code);
            };

        MapToCodes(vm);

        var viewModel = ko.mapping.fromJS(vm);     
         ko.applyBindings(viewModel);
4

1 に答える 1

2

コードにはいくつかの問題があり、少し再構築しました (fiddle: http://jsfiddle.net/VX9f2/2/ ):

html:

<button data-bind="click:submitJSON">submit json</button>
<h3>Diagnosis Codes<input type="button" value="Add" data-bind="click:AddDiagnosisCode"/></h3>
    <div data-bind="foreach:DiagnosisCodes">
        <div><input type="text"  data-bind="value:code"/><input type="button" value="Remove" data-bind="click: $root.RemoveDiagnosisCode"/>
        </div>
    </div>

js:

var Code = function(code){
    var self = this;
    self.code = ko.observable(code);
}

var VM = function(){
    var self = this;
    self.DiagnosisCodes = ko.observableArray([
        new Code("2345"),
        new Code("6789")]);
    self.AddDiagnosisCode = function() {
        self.DiagnosisCodes.push(new Code(""));
    }

    self.RemoveDiagnosisCode = function(item) {
         self.DiagnosisCodes.remove(item);
    }

    self.submitJSON = function() {
        var test= ko.mapping.toJSON(self.DiagnosisCodes); // have also tried ko.toJSON(viewModel)
        alert(test);
        }

}
       //var viewModel = ko.mapping.fromJS(new VM());     
         ko.applyBindings(new VM());

わかりやすくするために、最初の ko.mapping の使用法をコンストラクターに置き換えました。それでも使用したい場合は、お知らせください。

于 2013-11-04T23:09:45.870 に答える