Question

我正在尝试使用knockout js绑定包含可选字段的JSON。问题是我一直收到这个错误：

无法处理绑定“value：function ...”

我无法添加缺少的字段，因为我需要它们保持丢失（缺少的字段来自“父”JSON）

是否有任何选项可以告诉knockout js忽略这些字段，只有在用户在字段中输入任何内容时才添加它们？

Answer 1

如果使用属性语法，则可以绑定到不存在的视图模型属性，如$data.property。

<input type="text" data-bind="value: $data.key">

https://jsfiddle.net/hrfq3wdh/2/

Answer 2

你能使用hasOwnProperty吗？

var data = {
  foo1: 'bar1',
  foo3: 'bar3'
}


function viewModel(mydata) {
  var self = this;
  this.foo1 = ko.observable(mydata.foo1);
  this.foo2 = ko.observable(mydata.hasOwnProperty('foo2') ? mydata.foo2 : '');
  this.foo3 = ko.observable(mydata.foo3);

}


var vm = new viewModel(data);


(function($) {
  ko.applyBindings(vm); //bind the knockout model
})(jQuery);

https://jsfiddle.net/0o89pmju/8/

Answer 3

也许另一种可能性是使用ko映射插件和下面的with data binding运行代码段。

＆＃13;

var partial = {value : 456};
var full = { key: "abc", 
             value : 123};
             
function viewModel() {
var self = this;
this.full=ko.observable('');
this.partial=ko.observable('');
this.applyFull = function(){
    self.full(ko.mapping.fromJS(full));
    self.partial('');
  }
 this.applyPartial = function(){
     self.full('');
     self.partial(ko.mapping.fromJS(partial));
  }
}
     

var vm = new viewModel();

(function($) {
  ko.applyBindings(vm); //bind the knockout model
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<div data-bind="with: full">
  Key <input type="text" data-bind="value: key"> Value <input type="text" data-bind="value: value">
</div>
<div data-bind="with: partial">
  Value <input type="text" data-bind="value: value">
</div>

<button data-bind="click: applyFull"> apply Full </button>
<button data-bind="click: applyPartial"> apply Partial </button>

＆＃13;

Answer 4

所有答案都很好，但在我的小系统上实施起来太复杂了。

似乎问题是试图访问不存在的内部对象内的字段。（例如，当内部未定义时，main.inner.price）每当使用main.inner = main.inner || {}

在主对象中丢失时，我就会创建一个空对象

Knockout绑定可选字段

4 个答案: