params.json

{"note":"Don't delete this file! It's used internally to help with page regeneration.","name":"Knockout.viewmodel","body":"## Welcome to the knockout viewmodel plugin.\r\nThe knockout viewmodel plugin let's you create complex observable viewmodels easily and with more structure and control than ever before.\r\n\r\n### Example: Creating a simple viewmodel with ko.viewmodel\r\nCreating a viewmodel from a model is simple.\r\n```\r\nvar model, viewmodel;\r\n\r\n//Normally this JSON model would be returned via ajax.\r\nmodel = {\r\n  users:[ \r\n\t\t{firstName:\"John\", lastName:\"Doe\"},\r\n\t\t{firstName:\"James\", lastName:\"Smith\"}\r\n\t]\r\n};\r\n\r\nviewmodel = ko.viewmodel.fromModel(model);\r\n```\r\nThis code creates an observable viewModel with an observable array of users whose properties are observable.\r\n\r\n### Example: Creating a viewmodel with ko.viewModel\r\nNow lets say that you want to extend each object in the users array with an isDeleted flag. You would do this by specifying custom mapping options.\r\n```\r\noptions:{ \r\n\textend:{\r\n\t\t\"{root}.users[i]\": function(user){\r\n\t\t\t//note that user is an observable\r\n\t\t\t//we're adding isDeleted to the object not the observable\r\n\t\t\tuser().isDeleted = ko.observable(false);\r\n\t\t}\r\n\t}\r\n};\r\n\r\nviewmodel = ko.viewmodel.fromModel(model,options));\r\n```\r\nWe've now extended each object in the users array with an isDeleted flag. With ko.viewmodel all objects and properties are observable by default so it's up to you whether you extend the object or observable. \r\n\r\nIf we also wanted to add a delete method to an array we would use the following options:\r\n```\r\noptions:{ \r\n\textend:{\r\n        \"{root}.users[i]\": function(user){\r\n            user().isDeleted= ko.observable(false);\r\n        },\r\n        \"{root}.users\": function(users){\r\n            users.Delete = function(user){\r\n                user.isDeleted(true);\r\n            }\r\n        }\r\n    }\r\n};\r\n```\r\nNote we've extending the observable array with the Delete function. Here's a jsFiddle that shows the code bound to a view: http://jsfiddle.net/CodeRenaissance/ytjns/3/\r\n\r\n### Custom Processing\r\nEvery property can have custom processing specified for it. Custom processing is specified for an item by it's path. \r\n\r\n### Path Types\r\nEvery 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:\r\n\r\n* Full Path Name - Matches only the specific path, e.g. \"{root}.users[i].firstName\".\r\n* Parent Child Name - Matches the parent child combination specified. So \"users[i].firstName\" will only match the first name property on objects in the users array. Since this is an array we can also specify this as \"[i].firstName\" which would match every firstName property on an array child.\r\n* Property Name - Matches every property with that name. So a partial path of \"firstName\" would match every firstName property in your model.\r\n\r\n\r\n### Processing Types\r\nThere four types of custom processing: map, append, exclude, allow, and extend.\r\n\r\n* map - the path and all of it's children are processed only as you specify\r\n* append - the path and it's children are appended as is \r\n* exclude - the path is excluded from processing\r\n* allow - the path is not processed but all of it's children are\r\n* extend - the path and it's children are processed normally but then extended/modified as specified\r\n\r\nAll processing types are exclusive. Processing types have the following order of operations map, append, exclude, allow, and extend. All options can be specified both for fromModel and toModel.\r\n\r\n### The map processing option\r\n\tWith the map processing option the path and all of it's children are processed only as you specify.\r\n\t```\r\n\toptions:{ \r\n\t\textend:{\r\n\t\t\t\"{root}.users[i]\": function(user){\r\n\t\t\t\tuser.isDeleted= ko.observable(false);\r\n\t\t\t\treturn user;\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t```\r\n\tIn this case the users are passed through as is with the addition of an obeservable isDeleted flag. \r\n\tNote: \r\n\t*Make sure to return something from your function, otherwise undefined will be returned as the result of map.\r\n\t*The object passed into map is the unaltered object from your viewmodel or model (depending on if you are calling fromModel or toModel).\r\n### The append processing option\r\n\tWith the append processing option the path and all of it's children are appended as is.\r\n\t```\r\n\toptions:{ \r\n\t\tappend:[\"{root}.users[i]\"]\r\n\t};\r\n\t```\r\n\tIn this case none of the users have been altered and are appended unchanged.\r\n### The exclude processing option\r\n\tWith the exclude processing option the path and it's children are excluded from processing and will not be included.\r\n\t```\r\n\toptions:{ \r\n\t\texclude:[\"{root}.users[i].firstName\"]\r\n\t};\r\n\t```\r\n\tThe firstName property is not included.\r\n\t\r\n### The override processing option\r\n\tThe override processing option allows some default processing to be overridden. It does not affect processing of children. It is meant to be a quick way to do common things that map would otherwise need to be used for.\r\n\t```\r\n\toptions:{ \r\n\t\toverride:[\"{root}.someProperty\"]\r\n\t};\r\n\t```\r\n\tWhen calling:\r\n\t*fromModel\r\n\t\t** the path specified will not be wrapped in an observable.\r\n\t*toModel:\r\n\t\t** if the path is for a computed value it will be unwrapped.\r\n\t\t** if the path is for a non-observable value it will be included.\r\n\t\t\r\n### The extend processing option\r\n\tWith the override processing option the path and it's children are processed normally but then extended/modified as specified.\r\n\t```\r\n\toptions:{ \r\n\t\textend:{\r\n\t\t\t\"{root}.users[i]\": function(user){\r\n\t\t\t\t//note that user is an observable\r\n\t\t\t\t//we're adding isDeleted to the object not the observable\r\n\t\t\t\tuser().isDeleted = ko.observable(false);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t```\r\n\tThe 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. \r\n\tNote: Whatever is returned from the extend function will take the place the processed object.","tagline":"","google":""}