Knockout binds extra fields
I am trying to bind JSON containing optional fields using js knockout. The problem is I keep getting this error:
Unable to process binding "value: function ..."
And I can't add the missing fields as I need them so they don't go missing (the missing fields are taken from the "parent" JSON)
Is there any option to tell knockout js to ignore these fields and only add them if the user enters anything in the field?
source to share
Can hasOwnProperty be used?
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);
source to share
maybe another possibility is to use the ko display plugin and reduce the data binding execution snippet below.
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>
source to share
All answers are good, but too complicated to implement on my small system.
It looks like the problem was trying to access a field inside an innere object that doesn't exist. (for example main.inner.price
when the inner is undefined) I ended up creating an empty object when it was missing from the main object usingmain.inner = main.inner || {}
source to share