Is it possible to modify the (for lack of a better term) schema of an object during the mapping process? I would imagine it is, I just can't seem to get it to work. I'm trying something like this:
var data = {
itemOne: 'someData',
itemTwo: 'moreData'
}
var mapping = {
"newItem": {
create: function(options) {
return ko.observable(false);
}
}
};
ko.mapping.fromJS(data, mapping, _model.observableArrayPart);
unwrapObservable(item) Looking at the code, that call basically checks to see if item is an observable. If it is, return the value(), if it's not, just return the value.
The ko. applyBindings method activates Knockout and wires up the view-model to the view. Now that we have a view-model, we can create the bindings. In Knockout.js, you do this by adding data-bind attributes to HTML elements.
An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted. The main advantage of KO is that it updates our UI automatically when the view model changes.
To write a new value to the observable, call the observable and pass the new value as a parameter. For example, calling myViewModel. personName('Mary') will change the name value to 'Mary' . To write values to multiple observable properties on a model object, you can use chaining syntax.
Here is a sample that shows customizing how your array is creating and defining a key for it, so that you can apply updates using the mapping plugin: http://jsfiddle.net/rniemeyer/LHeQZ/
var data = [
{ id: 1, first: "Bob", last: "Smith" },
{ id: 2, first: "Jim", last: "Jones" },
{ id: 3, first: "Delete", last: "Me" }
];
var updatedData = [
{ id: 1, first: "Robert", last: "Smith" },
{ id: 2, first: "James", last: "Jones" },
{ id: 4, first: "New", last: "Guy" }
];
var Person = function(data) {
this.id = data.id;
this.first = ko.observable(data.first);
this.last = ko.observable(data.last);
this.full = ko.computed(function() {
return this.first() + " " + this.last();
}, this);
};
var dataMappingOptions = {
key: function(data) {
return data.id;
},
create: function(options) {
return new Person(options.data);
}
};
var viewModel = {
people: ko.mapping.fromJS([]),
loadInitialData: function() {
ko.mapping.fromJS(data, dataMappingOptions, viewModel.people);
},
loadUpdatedData: function() {
ko.mapping.fromJS(updatedData, dataMappingOptions, viewModel.people);
}
};
ko.applyBindings(viewModel);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With