Knockout綁定可選字段

Question

我想綁定一個JSON包含可選字段使用敲除js。 問題是我不斷收到此錯誤：

Unable to process binding "value: function..."

當我需要他們仍然下落不明

（缺少的字段從「父」 JSON採取）我不能添加缺少的領域有沒有任何選項可以告訴淘汰賽js忽略這些字段，只有在用戶輸入字段中的任何內容時才添加它們？

Answer 1

你可以使用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 2

也許另一可能性是使用こ映射插件和與數據結合下面運行段。

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);

<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>

Answer 3

如果使用屬性語法，就像$data.property您可以綁定到一個不存在的視圖模型屬性。

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

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

Answer 4

所有的答案是好的，但過於複雜，在我的小系統來實現。

看來問題是試圖訪問不存在的內部對象內的字段。 （例如，main.inner.price內部未定義時） 我最終創建一個空對象，只要它在主對象中缺少main.inner = main.inner || {}