The knockout viewmodel plugin runs several times faster than the knockout mapping plugin. It also allows you to fine tune your viewmodel creation for even more speed. 42 | Now you can create complex observable viewmodels easily and with more structure and control than ever before! 43 |
44 |48 | There is a growing suite of unit-tests that ensures that ko.viewmodel works reliably. Bug fixes always start with one or more new unit test so reliability goes up over time. 49 |
50 |This code creates an viewModel with an observable array of users whose properties are observable.
54 |
55 | model = {//your model is normally provided via an ajax call
56 | users:[
57 | {firstName:"John", lastName:"Doe"},
58 | {firstName:"James", lastName:"Smith"}
59 | ]
60 | };
61 |
62 | viewmodel = ko.viewmodel.fromModel(model);
63 | If you need to update your viewmodel with more recent model data this can be done by calling updateFromModel.
69 | 70 |
71 | ko.viewmodel.updateFromModel(viewmodel, updatedModel);
72 | This method optionally takes a third parameter, makeNoncontiguousObjectUpdates, which can be used to eliminate long running script errors in older browsers. When set to true each object will have an update function created for it which will be called via setTimeout. Given this makeNoncontiguousObjectUpdates should only be set to true if you are getting long running script errors in older browsers. An onComplete method allows you to pass in a callback to be fired when noncontiguous object updates are completed.
75 |
76 | ko.viewmodel.updateFromModel(viewmodel, updatedModel, true).onComplete(function(){
77 | //respond to completion of update
78 | });
79 | Note: the onComplete method is only available when makeNoncontiguousObjectUpdates is set to true.
81 |At somepoint you'll need to get an updated model to send back up to the server. This can be done by calling toModel.
86 | 87 |
88 | model = ko.viewmodel.toModel(viewmodel);
89 | Now lets say that you want to extend each object in the users array with an isDeleted flag. You would do this by specifying an extend option. 94 |
95 |
96 | options:{
97 | extend:{
98 | "{root}.users[i]": function(user){
99 | user.isDeleted = ko.observable(false);
100 | }
101 | }
102 | };
103 |
104 | viewmodel = ko.viewmodel.fromModel(model,options));
105 | If we also wanted to add a delete method to an array we would use the following options:
107 |
108 | options:{
109 | extend:{
110 | "{root}.users[i]": function(user){
111 | user.isDeleted= ko.observable(false);
112 | },
113 | "{root}.users": function(users){
114 | users.Delete = function(user){
115 | user.isDeleted(true);
116 | }
117 | }
118 | }
119 | };
120 | Processing options are specified for an item by it's path. Every full path starts with {root}. Items in an array are referred to as [i]. So a path of "{root}.users[i].firstName" would be used to specify custom processing for the firstName property of every object in the users array. That is its full path name, but it's not necessary to refer to every item by it's -full path name. There are three ways of referencing a path:
128 | 129 |139 | There six types of processing options: custom, append, exclude, extend, arrayChildId, and shared. 140 |
141 | 142 |151 | The only processing types that can be used together on a path are extend and arrayChildId. If multiple processing options are specified 152 | for the same path only one will win. Which one will win is subject to internal processing logic that has been organized for performance reasons 153 | and should not be relied upon as it is subject to change in future versions. 154 |
155 |
159 | options:{
160 | extend:{
161 | "{root}.users[i]": function(user){
162 | user.isDeleted = ko.observable(false);
163 | return user;
164 | }
165 | }
166 | };
167 | 169 | The value of the path is passed to the extend function after processing has been completed on the path and its children. Objects can be modified without being returned. 170 | Note: Whatever is returned from the extend function will be persisted and replace the default processing. 171 |
172 | There is also this alternate syntax if you need to do unmapping: 173 |
174 | options:{
175 | custom:{
176 | "{root}.users[i]": {
177 | map:function(mapped){
178 | mapped.isDeleted= ko.observable(false);
179 | return mapped;
180 | },
181 | unmap:function(unmapped){
182 | //Because isDeleted was an observable it was unwrapped and added to the model.
183 | delete unmapped.isDeleted;
184 | return unmapped;
185 | }
186 | }
187 | }
188 | };
189 |
200 | options:{
201 | custom:{
202 | "{root}.users[i]": function(user){
203 | user.isDeleted= ko.observable(false);
204 | return user;
205 | }
206 | }
207 | };
208 |
212 | options:{
213 | custom:{
214 | "{root}.users[i]": {
215 | map:function(user){
216 | var mapped = ko.viewmodel.fromModel(user);
217 | mapped().isDeleted= ko.observable(false);
218 | return mapped;
219 | },
220 | unmap:function(user){
221 | var unmapped = ko.viewmodel.toModel(user);
222 | delete unmapped.isDeleted;
223 | return unmapped;
224 | }
225 | }
226 | }
227 | };
228 |
241 | options:{
242 | append:["{root}.users[i]"]
243 | };
244 |
251 | options:{
252 | exclude:["{root}.users[i].firstName"]
253 | };
254 |
273 | options:{
274 | arrayChildId:{
275 | "{root}.users":"id"
276 | }
277 | }
278 |
283 | var model = {
284 | items:[
285 | {
286 | id:256889,
287 | name:"item Name",
288 | description:"Description of Item",
289 | availble:3,
290 | price:4.25
291 | }
292 | ]
293 | };
294 |
295 | var viewmodel = ko.viewmodel(model, {
296 | arrayChildId:{//child item id
297 | "{root}.items":"id"
298 | },
299 | extend:{
300 | "{root}.items":function(items){//Toggle function added to array for better performance
301 | items.ToggleSelect = function (item){
302 | item.selected(!item.selected);
303 | }
304 | return items;
305 | },
306 | "{root}.items[i]":function (item){
307 | item.selected = ko.observable(false);
308 | }
309 | }
310 | }
311 | 376 | Global options affect all calls to ko.viewmodel and are access and set via ko.viewmodel.options. Currently there are two global options: 377 |
378 | 379 |