0

我有带有一系列诊断代码的视图模型。在我的 html 中，我有一个数据绑定到单击的按钮，该单击将空白诊断代码添加到数组中。这一切都有效。

我使用按钮添加诊断代码。这行得通。

我从外部源接收 JSON，然后尝试将其包装在 observable 中。因为它来自外部源，所以它没有我可以绑定的函数，所以我绑定到不属于 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"]
}

更新：看起来映射插件将简单类型（字符串、整数等）的数组转换为 observables 而不是 observableArrays。因此，在调用映射之前，我修改了（在 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

代码有几个问题，对其进行了一些重组（小提琴：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 回答