| Name | \n{{:name}} | \n
| Name | \n{{:name}} | \n
| Name | \\n{{:name}} | \\n
| Name | \\n{{:name}} | \\n
',height:"90",title:""},{_type:"para",title:"Sample: Observable property change, with onPropertyChange handler",text:'And here is a sample, using an event handler for propertyChange to respond to the observable property changes.',anchor:"sample-onpropertychange"},{_type:"sample",typeLabel:"Sample:",codetabs:[],sectionTypes:{para:"para",data:"data",template:"template",code:"code",links:"links"},sections:[{_type:"code",title:"",code:'$(person.address).on("propertyChange", changeHandler); '},{_type:"code",title:"Modify the value of a property on a chosen path:",code:'$.observable(person).setProperty("address.street", "1st Ave");\n'}],code:'var person = {\n address: {\n street: "1st Ave"\n }\n};\n\n$("#modify").on("click", function() {\n $.observable(person).setProperty("address.street", "Main St");\n});\n\n$("#revert").on("click", function() {\n $.observable(person).setProperty("address.street", "1st Ave");\n});\n\n$(person.address).on("propertyChange", changeHandler); \n\nfunction changeHandler(ev, eventArgs) {\n var message = "The \'" + eventArgs.path + "\' is \'" + eventArgs.value + "\'.";\n $("#messages").append(message + "
");\n}',html:'\n\n\n
',title:"",height:"110"},{_type:"para",title:"Sample: Observable property change, with $.observe(...)",text:'This sample uses $.observe() to listen to the observable property changes.',anchor:"sample-observe"},{_type:"sample",typeLabel:"Sample:",codetabs:[],sectionTypes:{para:"para",data:"data",template:"template",code:"code",links:"links"},sections:[{_type:"code",title:"",code:'$.observe(person, "address.street", changeHandler);'},{_type:"code",title:"Modify the value of a property on a chosen path:",code:'$.observable(person).setProperty("address.street", "Main St");'}],code:'var person = {\n address: {\n street: "1st Ave"\n }\n};\n\n$("#modify").on("click", function() {\n $.observable(person).setProperty("address.street", "Main St");\n});\n\n$("#revert").on("click", function() {\n $.observable(person).setProperty("address.street", "1st Ave");\n});\n\n$.observe(person, "address.street", changeHandler); \n\nfunction changeHandler(ev, eventArgs) {\n var message = "The \'" + eventArgs.path + "\' is \'" + eventArgs.value + "\'.";\n if (ev.data) {\n message += "\\n\\nThe full path is \'" + ev.data.fullPath + "\'.";\n }\n $("#messages").append(message + "
");\n}',html:'\n\n\n
',height:"110",title:""},{_type:"para",title:"",text:"
',title:"",height:"150"},{_type:"links",title:"See also:",links:[],topics:[{_type:"topic",hash:"removeprop",label:"$.observable(object).removeProperty()"},{_type:"topic",hash:"namespaces",label:"Namespaces (advanced)"},{_type:"topic",hash:"delay",label:"Async or batched events (advanced)"}]}]},arrchange:{title:"Modify an array observably",path:"",sections:[{_type:"para",title:"",text:"Use `$.observable(myArray)` to obtain an observable array -- which provides methods for making observable changes to the array:"},{_type:"links",title:"",links:[],topics:[{hash:"insert",label:"$.observable(array).insert()"},{hash:"remove",label:"$.observable(array).remove()"},{hash:"move",label:"$.observable(array).move()"},{hash:"refresh",label:"$.observable(array).refresh()"}]},{_type:"para",title:"",text:"(See also: *[Observable objects and arrays](#$observable)*)\n"}]},insert:{title:"Making observable changes: $.observable(array).insert()",path:"",sections:[{_type:"para",title:"Changing an array observably: inserting items",text:'If you pass an array to `$.observable()`, you obtain an observable array (a very lightweight wrapper around your array) which provides methods for modifying the array observably, including an `insert()` method:'},{_type:"api",typeLabel:"API:",title:"$.observable(myArray).insert(index, insertedItems)",name:"insert",object:"$.observable(array)",method:!0,returns:"this",signatures:[{_type:"signature",title:"",params:[{_type:"param",name:"index",type:"integer",optional:!0,description:"Optional index at which insertion will begin. If not specified, items are appended."},{_type:"param",name:"insertedItems",type:"any",optional:!1,description:"item, or array of items, to be inserted"}],args:[],sections:[],example:"$.observable(people).insert(3, insertedItems);",description:"Observably append or insert an item, or set of items"}],description:"Insert or append one or more items to an array",sectionTypes:{para:"para",data:"data",template:"template",code:"code",sample:"sample",links:"links"},anchor:"api"},{_type:"para",title:"Sample: Appending to an array:",text:'Here is a sample using `insert()` to append an item to an array.\n\nA data-linked template responds to the observable array changes.',anchor:"append"},{_type:"sample",typeLabel:"Sample:",codetabs:[],sectionTypes:{para:"para",data:"data",template:"template",code:"code",links:"links"},sections:[{_type:"template",title:"",markup:'var tmpl = $.templates("id: {{:id}}
");\n\ntmpl.link("#result", things);'},{_type:"code",title:"Append an item:",code:'$.observable(things).insert(\n {id: "item" + count++}\n);'}],code:'var things = [{id: "item1"}, {id: "item2"}],\n count = 3;\n\n$("#append").on("click", function() {\n $.observable(things).insert(\n {id: "item" + count++}\n );\n});\n\n$("#insert2").on("click", function() {\n $.observable(things).insert(\n [\n {id: "item" + count++},\n {id: "item" + count++}\n ]\n );\n});\n\nvar tmpl = $.templates("id: {{:id}}
");\n\ntmpl.link("#result", things);',html:'
lastNamephones (array), or changes if a new array is assigned to the phones propertystreet property of the address property of personperson1: changes to lastName and any address propertyperson2: changes to firstNameperson3: changes to any property of the person3 object itself, and to any property of the person3.address objecttarget: the object which changeddata: JsViews metadata, including: fullPath (the data-linking path such as "address.street")ev.data object is also passed to the handler as this pointer)'},{_type:"param",name:"eventArgs",type:"object",optional:!1,description:'JsViews event object for property or array changes, with properties change and additional properties specific to the \'change\' type:path, value and oldValue. (With change="set")index and items. (With change="insert")index and numToRemove. (With change="remove")oldIndex, index and items. (With change="move")eventArgs object for each of these events will have an additional property: refresh = true (together with the usual change="insert" / "remove" / "move" etc.)change="refresh" event will be triggered, which will also have an oldItems property$.observe(...) or $.observable(object).observeAll(...)",sectionTypes:{para:"para",data:"data",template:"template",code:"code",sample:"sample",links:"links"},anchor:"handler-api"},{_type:"para",title:"Samples:",text:'Here is a sample showing `$.observe(person, "name", "address^*", changeHandler);`',anchor:"samples"},{_type:"sample",typeLabel:"Sample:",codetabs:[],sectionTypes:{para:"para",data:"data",template:"template",code:"code",links:"links"},sections:[{_type:"para",title:"Register a handler for changes: ",text:'We handle changes in the `name` and `address` properties of the `person`, and any property of the `address`:\n\n```js\n$.observe(person, "name", "address^*", changeHandler);\n```'},{_type:"code",title:"Define the handler:",code:"function changeHandler(ev, eventArgs) {\n var message = ... + eventArgs.path + ... + eventArgs.value ...;\n ...\n}"},{_type:"template",title:"Template also binds to 'deep paths'",markup:''},{_type:"code",title:"Modify values through template binding or buttons:",code:'$("#changeAddress").on("click", function() {\n $.observable(person).setProperty(\n "address", \n {\n street: "New Street",\n ZIP: "99999"\n }\n...'}],code:'var person = {\n name: "Pete",\n address: {\n street: "1st Ave",\n ZIP: "34009"\n }\n};\n\n$("#modify").on("click", function() {\n $.observable(person).setProperty({\n name: "Hermione",\n "address.street": "Main St",\n "address.ZIP": "45008"\n });\n});\n\n$("#changeAddress").on("click", function() {\n $.observable(person).setProperty(\n "address", \n {\n street: "New Street",\n ZIP: "99999"\n }\n );\n});\n\n$(".clear").on("click", function() {\n $(".messages").empty();\n});\n\nvar tmpl = $.templates("#personTmpl");\n\ntmpl.link("#result", person);\n\n$.observe(person, "name", "address^*", changeHandler);\n\nfunction changeHandler(ev, eventArgs) {\n var message = "The new " + eventArgs.path + " is "\n + $.views.converters.encode(JSON.stringify(eventArgs.value)) + ".";\n // (Note that we encode < > and & as HTML entities, for display)\n\n $(".messages").append("target: the object which changeddata: JsViews metadata, including: fullPath (the data-linking path which will be "*", since this is observeAll)observeAll (a helper object with methods path, parents and filter, see below)change and additional properties specific to the \'change\' type:path, value and oldValue. (With change="set")index and items. (With change="insert")index and numToRemove. (With change="remove")oldIndex, index and items. (With change="move")eventArgs object for each of these events will have an additional property: refresh = true (together with the usual change="insert" / "remove" / "move" etc.)change="refresh" event will be triggered, which will also have an oldItems property$.observable(object).observeAll(myHandler)",sectionTypes:{para:"para",data:"data",template:"template",code:"code",sample:"sample",links:"links"},anchor:"api-handler"},{_type:"para",title:"Sample:",text:"We'll use the `observeAll()` API to provide an alternative version of our [last sample](#observe@all-phones) in the [`$.observe()`](#observe) topic.\n\nThis allows us to include listening to newly added items in the phone array. \n\n(But in this version we use `$observeAll()` directly, rather than using the `**` wild card as we did in that sample.)",anchor:"phones"},{_type:"sample",typeLabel:"Sample:",codetabs:[],sectionTypes:{para:"para",data:"data",template:"template",code:"code",links:"links"},sections:[{_type:"para",title:"A single observeAll() call for observing all the objects",text:"Even `phone` objects added to the `phones` array will automatically be 'listened' to by our handler, without us needing to write any additional code.\n\n```js\n$.observable(person).observeAll(changeHandler);\n```"},{_type:"code",title:"Define our handler:",code:'function changeHandler(ev, eventArgs) {\n var message = "";\n if (ev.data.observeAll) {\n message += "$.observable(object).observeAll(myHandler, myFilter)",sectionTypes:{para:"para",data:"data",template:"template",code:"code",sample:"sample",links:"links"},anchor:"api-filter"},{_type:"para",title:"observeAll() with View Model object hierarchies",text:"The `observeAll()` API works equally well with View Model objects or plain objects. See *[JsViews: Data / View Model](#jsvmodel)*. At the end of that topic we show modified versions of our `observeAll()` sample above, [using](#jsvmodel@linkvmsample) 'hand-coded' View Model objects, or [using](#jsvmodel@compilevmsample) compiled View Model objects.",anchor:"vm"},{_type:"para",title:'observeAll() and "**" paths',text:"As an alternative to using the `observeAll()` API, it is sometimes simpler to use the `**` ***all*** *wild card* path in association with `$.observe()`, or with computed observables, as shown [here](#observe@all) and [here](#computed@depends-all). ",anchor:"all-wildcard"},{_type:"links",title:"See also:",links:[],topics:[{_type:"topic",hash:"unobserveAll",label:"unobserveAll()"},{_type:"topic",hash:"observe",label:"observe()"},{_type:"topic",hash:"namespaces",label:"Namespaces"}]}]},unobserveAll:{title:"$.observable().unobserveAll()",path:"",sections:[{_type:"para",title:"",text:'Just as `$.observable(objectOrArray).observeAll(myHandler)` will traverse the whole hierarchy of objects or arrays under the root `objectOrArray` and attach the handler to each object, similarly `$.observable(objectOrArray).unobserveAll(myHandler)` will traverse the whole hierarchy and remove the handler from any object to which it has been attached.'},{_type:"api",typeLabel:"API:",title:"$.observable(objectOrArray).unobserveAll(myHandler)",name:"unobserveAll",object:"$.observable(obOrArray)",method:!0,returns:"",signatures:[{_type:"signature",title:"",params:[{_type:"param",name:"myHandler",type:"function",optional:!0,description:"Event handler that was registered"},{_type:"param",name:"myFilter",type:"function",optional:!0,description:"Filter function"}],args:[],sections:[],example:"$.observable(person).unobserveAll(myHandler); ",description:"Remove handler from object/array and from all nested objects"},{_type:"signature",title:"",params:[],args:[],sections:[],example:"$.observable(person).unobserveAll(); ",description:"Remove all handlers for observable changes, from an object/array and from all nested objects"}],description:"Remove a handler for observable changes, from an object or array, and from any nested objects or arrays under it",sectionTypes:{para:"para",data:"data",template:"template",code:"code",sample:"sample",links:"links"},anchor:"api"},{_type:"para",title:"Samples:",text:'Here is a copy of a sample from the `.observeAll()` topic, on which we have used `observeAll`/`unobserveAll` to provide an enable/disable checkbox on the Change Log:'},{_type:"sample",typeLabel:"Sample:",codetabs:[],sectionTypes:{para:"para",data:"data",template:"template",code:"code",links:"links"},sections:[{_type:"para",title:"",text:'```jsr\n\n```\n\n```js\n$("#attach").on("click", function(x) {\n logChanges(this.checked);\n});\n```'},{_type:"code",title:"Call unobserveAll() on the root, to stop 'listening'...",code:"function logChanges(enable) {\n if (enable) {\n $.observable(person).observeAll(changeHandler);\n } else {\n $.observable(person).unobserveAll(changeHandler);\n }\n}"}],html:'\",\n \"height\": \"90\",\n \"title\": \"\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample: Observable property change, with onPropertyChange handler\",\n \"text\": \"And here is a sample, using an event handler for propertyChange to respond to the observable property changes.\",\n \"anchor\": \"sample-onpropertychange\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"code\",\n \"title\": \"\",\n \"code\": \"$(person.address).on(\\\"propertyChange\\\", changeHandler); \"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Modify the value of a property on a chosen path:\",\n \"code\": \"$.observable(person).setProperty(\\\"address.street\\\", \\\"1st Ave\\\");\\n\"\n }\n ],\n \"code\": \"var person = {\\n address: {\\n street: \\\"1st Ave\\\"\\n }\\n};\\n\\n$(\\\"#modify\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"Main St\\\");\\n});\\n\\n$(\\\"#revert\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"1st Ave\\\");\\n});\\n\\n$(person.address).on(\\\"propertyChange\\\", changeHandler); \\n\\nfunction changeHandler(ev, eventArgs) {\\n var message = \\\"The '\\\" + eventArgs.path + \\\"' is '\\\" + eventArgs.value + \\\"'.\\\";\\n $(\\\"#messages\\\").append(message + \\\"
\\\");\\n}\",\n \"html\": \"\\n\\n\\n
\",\n \"title\": \"\",\n \"height\": \"110\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample: Observable property change, with $.observe(...)\",\n \"text\": \"This sample uses $.observe() to listen to the observable property changes.\",\n \"anchor\": \"sample-observe\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"code\",\n \"title\": \"\",\n \"code\": \"$.observe(person, \\\"address.street\\\", changeHandler);\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Modify the value of a property on a chosen path:\",\n \"code\": \"$.observable(person).setProperty(\\\"address.street\\\", \\\"Main St\\\");\"\n }\n ],\n \"code\": \"var person = {\\n address: {\\n street: \\\"1st Ave\\\"\\n }\\n};\\n\\n$(\\\"#modify\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"Main St\\\");\\n});\\n\\n$(\\\"#revert\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"1st Ave\\\");\\n});\\n\\n$.observe(person, \\\"address.street\\\", changeHandler); \\n\\nfunction changeHandler(ev, eventArgs) {\\n var message = \\\"The '\\\" + eventArgs.path + \\\"' is '\\\" + eventArgs.value + \\\"'.\\\";\\n if (ev.data) {\\n message += \\\"\\\\n\\\\nThe full path is '\\\" + ev.data.fullPath + \\\"'.\\\";\\n }\\n $(\\\"#messages\\\").append(message + \\\"
\\\");\\n}\",\n \"html\": \"\\n\\n\\n
\",\n \"height\": \"110\",\n \"title\": \"\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"
\",\n \"title\": \"\",\n \"height\": \"150\"\n },\n {\n \"_type\": \"links\",\n \"title\": \"See also:\",\n \"links\": [],\n \"topics\": [\n {\n \"_type\": \"topic\",\n \"hash\": \"removeprop\",\n \"label\": \"$.observable(object).removeProperty()\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"namespaces\",\n \"label\": \"Namespaces (advanced)\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"delay\",\n \"label\": \"Async or batched events (advanced)\"\n }\n ]\n }\n ]\n },\n \"arrchange\": {\n \"title\": \"Modify an array observably\",\n \"path\": \"\",\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"Use `$.observable(myArray)` to obtain an observable array -- which provides methods for making observable changes to the array:\"\n },\n {\n \"_type\": \"links\",\n \"title\": \"\",\n \"links\": [],\n \"topics\": [\n {\n \"hash\": \"insert\",\n \"label\": \"$.observable(array).insert()\"\n },\n {\n \"hash\": \"remove\",\n \"label\": \"$.observable(array).remove()\"\n },\n {\n \"hash\": \"move\",\n \"label\": \"$.observable(array).move()\"\n },\n {\n \"hash\": \"refresh\",\n \"label\": \"$.observable(array).refresh()\"\n }\n ]\n },\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"(See also: *[Observable objects and arrays](#$observable)*)\\n\"\n }\n ]\n },\n \"insert\": {\n \"title\": \"Making observable changes: $.observable(array).insert()\",\n \"path\": \"\",\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"Changing an array observably: inserting items\",\n \"text\": \"If you pass an array to `$.observable()`, you obtain an observable array (a very lightweight wrapper around your array) which provides methods for modifying the array observably, including an `insert()` method:\"\n },\n {\n \"_type\": \"api\",\n \"typeLabel\": \"API:\",\n \"title\": \"$.observable(myArray).insert(index, insertedItems)\",\n \"name\": \"insert\",\n \"object\": \"$.observable(array)\",\n \"method\": true,\n \"returns\": \"this\",\n \"signatures\": [\n {\n \"_type\": \"signature\",\n \"title\": \"\",\n \"params\": [\n {\n \"_type\": \"param\",\n \"name\": \"index\",\n \"type\": \"integer\",\n \"optional\": true,\n \"description\": \"Optional index at which insertion will begin. If not specified, items are appended.\"\n },\n {\n \"_type\": \"param\",\n \"name\": \"insertedItems\",\n \"type\": \"any\",\n \"optional\": false,\n \"description\": \"item, or array of items, to be inserted\"\n }\n ],\n \"args\": [],\n \"sections\": [],\n \"example\": \"$.observable(people).insert(3, insertedItems);\",\n \"description\": \"Observably append or insert an item, or set of items\"\n }\n ],\n \"description\": \"Insert or append one or more items to an array\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample: Appending to an array:\",\n \"text\": \"Here is a sample using `insert()` to append an item to an array.\\n\\nA data-linked template responds to the observable array changes.\",\n \"anchor\": \"append\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"template\",\n \"title\": \"\",\n \"markup\": \"var tmpl = $.templates(\\\"id: {{:id}}
\\\");\\n\\ntmpl.link(\\\"#result\\\", things);\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Append an item:\",\n \"code\": \"$.observable(things).insert(\\n {id: \\\"item\\\" + count++}\\n);\"\n }\n ],\n \"code\": \"var things = [{id: \\\"item1\\\"}, {id: \\\"item2\\\"}],\\n count = 3;\\n\\n$(\\\"#append\\\").on(\\\"click\\\", function() {\\n $.observable(things).insert(\\n {id: \\\"item\\\" + count++}\\n );\\n});\\n\\n$(\\\"#insert2\\\").on(\\\"click\\\", function() {\\n $.observable(things).insert(\\n [\\n {id: \\\"item\\\" + count++},\\n {id: \\\"item\\\" + count++}\\n ]\\n );\\n});\\n\\nvar tmpl = $.templates(\\\"id: {{:id}}
\\\");\\n\\ntmpl.link(\\\"#result\\\", things);\",\n \"html\": \"
lastNamephones (array), or changes if a new array is assigned to the phones propertystreet property of the address property of personperson1: changes to lastName and any address propertyperson2: changes to firstNameperson3: changes to any property of the person3 object itself, and to any property of the person3.address objecttarget: the object which changeddata: JsViews metadata, including: fullPath (the data-linking path such as \\\"address.street\\\")ev.data object is also passed to the handler as this pointer)\"\n },\n {\n \"_type\": \"param\",\n \"name\": \"eventArgs\",\n \"type\": \"object\",\n \"optional\": false,\n \"description\": \"JsViews event object for property or array changes, with properties change and additional properties specific to the 'change' type:path, value and oldValue. (With change=\\\"set\\\")index and items. (With change=\\\"insert\\\")index and numToRemove. (With change=\\\"remove\\\")oldIndex, index and items. (With change=\\\"move\\\")eventArgs object for each of these events will have an additional property: refresh = true (together with the usual change=\\\"insert\\\" / \\\"remove\\\" / \\\"move\\\" etc.)change=\\\"refresh\\\" event will be triggered, which will also have an oldItems property$.observe(...) or $.observable(object).observeAll(...)\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"handler-api\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Samples:\",\n \"text\": \"Here is a sample showing `$.observe(person, \\\"name\\\", \\\"address^*\\\", changeHandler);`\",\n \"anchor\": \"samples\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"Register a handler for changes: \",\n \"text\": \"We handle changes in the `name` and `address` properties of the `person`, and any property of the `address`:\\n\\n```js\\n$.observe(person, \\\"name\\\", \\\"address^*\\\", changeHandler);\\n```\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Define the handler:\",\n \"code\": \"function changeHandler(ev, eventArgs) {\\n var message = ... + eventArgs.path + ... + eventArgs.value ...;\\n ...\\n}\"\n },\n {\n \"_type\": \"template\",\n \"title\": \"Template also binds to 'deep paths'\",\n \"markup\": \"\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Modify values through template binding or buttons:\",\n \"code\": \"$(\\\"#changeAddress\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\n \\\"address\\\", \\n {\\n street: \\\"New Street\\\",\\n ZIP: \\\"99999\\\"\\n }\\n...\"\n }\n ],\n \"code\": \"var person = {\\n name: \\\"Pete\\\",\\n address: {\\n street: \\\"1st Ave\\\",\\n ZIP: \\\"34009\\\"\\n }\\n};\\n\\n$(\\\"#modify\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty({\\n name: \\\"Hermione\\\",\\n \\\"address.street\\\": \\\"Main St\\\",\\n \\\"address.ZIP\\\": \\\"45008\\\"\\n });\\n});\\n\\n$(\\\"#changeAddress\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\n \\\"address\\\", \\n {\\n street: \\\"New Street\\\",\\n ZIP: \\\"99999\\\"\\n }\\n );\\n});\\n\\n$(\\\".clear\\\").on(\\\"click\\\", function() {\\n $(\\\".messages\\\").empty();\\n});\\n\\nvar tmpl = $.templates(\\\"#personTmpl\\\");\\n\\ntmpl.link(\\\"#result\\\", person);\\n\\n$.observe(person, \\\"name\\\", \\\"address^*\\\", changeHandler);\\n\\nfunction changeHandler(ev, eventArgs) {\\n var message = \\\"The new \\\" + eventArgs.path + \\\" is \\\"\\n + $.views.converters.encode(JSON.stringify(eventArgs.value)) + \\\".\\\";\\n // (Note that we encode < > and & as HTML entities, for display)\\n\\n $(\\\".messages\\\").append(\\\"target: the object which changeddata: JsViews metadata, including: fullPath (the data-linking path which will be \\\"*\\\", since this is observeAll)observeAll (a helper object with methods path, parents and filter, see below)change and additional properties specific to the 'change' type:path, value and oldValue. (With change=\\\"set\\\")index and items. (With change=\\\"insert\\\")index and numToRemove. (With change=\\\"remove\\\")oldIndex, index and items. (With change=\\\"move\\\")eventArgs object for each of these events will have an additional property: refresh = true (together with the usual change=\\\"insert\\\" / \\\"remove\\\" / \\\"move\\\" etc.)change=\\\"refresh\\\" event will be triggered, which will also have an oldItems property$.observable(object).observeAll(myHandler)\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api-handler\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample:\",\n \"text\": \"We'll use the `observeAll()` API to provide an alternative version of our [last sample](#observe@all-phones) in the [`$.observe()`](#observe) topic.\\n\\nThis allows us to include listening to newly added items in the phone array. \\n\\n(But in this version we use `$observeAll()` directly, rather than using the `**` wild card as we did in that sample.)\",\n \"anchor\": \"phones\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"A single observeAll() call for observing all the objects\",\n \"text\": \"Even `phone` objects added to the `phones` array will automatically be 'listened' to by our handler, without us needing to write any additional code.\\n\\n```js\\n$.observable(person).observeAll(changeHandler);\\n```\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Define our handler:\",\n \"code\": \"function changeHandler(ev, eventArgs) {\\n var message = \\\"\\\";\\n if (ev.data.observeAll) {\\n message += \\\"$.observable(object).observeAll(myHandler, myFilter)\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api-filter\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"observeAll() with View Model object hierarchies\",\n \"text\": \"The `observeAll()` API works equally well with View Model objects or plain objects. See *[JsViews: Data / View Model](#jsvmodel)*. At the end of that topic we show modified versions of our `observeAll()` sample above, [using](#jsvmodel@linkvmsample) 'hand-coded' View Model objects, or [using](#jsvmodel@compilevmsample) compiled View Model objects.\",\n \"anchor\": \"vm\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"observeAll() and \\\"**\\\" paths\",\n \"text\": \"As an alternative to using the `observeAll()` API, it is sometimes simpler to use the `**` ***all*** *wild card* path in association with `$.observe()`, or with computed observables, as shown [here](#observe@all) and [here](#computed@depends-all). \",\n \"anchor\": \"all-wildcard\"\n },\n {\n \"_type\": \"links\",\n \"title\": \"See also:\",\n \"links\": [],\n \"topics\": [\n {\n \"_type\": \"topic\",\n \"hash\": \"unobserveAll\",\n \"label\": \"unobserveAll()\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"observe\",\n \"label\": \"observe()\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"namespaces\",\n \"label\": \"Namespaces\"\n }\n ]\n }\n ]\n },\n \"unobserveAll\": {\n \"title\": \"$.observable().unobserveAll()\",\n \"path\": \"\",\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"Just as `$.observable(objectOrArray).observeAll(myHandler)` will traverse the whole hierarchy of objects or arrays under the root `objectOrArray` and attach the handler to each object, similarly `$.observable(objectOrArray).unobserveAll(myHandler)` will traverse the whole hierarchy and remove the handler from any object to which it has been attached.\"\n },\n {\n \"_type\": \"api\",\n \"typeLabel\": \"API:\",\n \"title\": \"$.observable(objectOrArray).unobserveAll(myHandler)\",\n \"name\": \"unobserveAll\",\n \"object\": \"$.observable(obOrArray)\",\n \"method\": true,\n \"returns\": \"\",\n \"signatures\": [\n {\n \"_type\": \"signature\",\n \"title\": \"\",\n \"params\": [\n {\n \"_type\": \"param\",\n \"name\": \"myHandler\",\n \"type\": \"function\",\n \"optional\": true,\n \"description\": \"Event handler that was registered\"\n },\n {\n \"_type\": \"param\",\n \"name\": \"myFilter\",\n \"type\": \"function\",\n \"optional\": true,\n \"description\": \"Filter function\"\n }\n ],\n \"args\": [],\n \"sections\": [],\n \"example\": \"$.observable(person).unobserveAll(myHandler); \",\n \"description\": \"Remove handler from object/array and from all nested objects\"\n },\n {\n \"_type\": \"signature\",\n \"title\": \"\",\n \"params\": [],\n \"args\": [],\n \"sections\": [],\n \"example\": \"$.observable(person).unobserveAll(); \",\n \"description\": \"Remove all handlers for observable changes, from an object/array and from all nested objects\"\n }\n ],\n \"description\": \"Remove a handler for observable changes, from an object or array, and from any nested objects or arrays under it\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Samples:\",\n \"text\": \"Here is a copy of a sample from the `.observeAll()` topic, on which we have used `observeAll`/`unobserveAll` to provide an enable/disable checkbox on the Change Log:\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"```jsr\\n\\n```\\n\\n```js\\n$(\\\"#attach\\\").on(\\\"click\\\", function(x) {\\n logChanges(this.checked);\\n});\\n```\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Call unobserveAll() on the root, to stop 'listening'...\",\n \"code\": \"function logChanges(enable) {\\n if (enable) {\\n $.observable(person).observeAll(changeHandler);\\n } else {\\n $.observable(person).unobserveAll(changeHandler);\\n }\\n}\"\n }\n ],\n \"html\": \"\",\n \"height\": \"90\",\n \"title\": \"\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample: Observable property change, with onPropertyChange handler\",\n \"text\": \"And here is a sample, using an event handler for propertyChange to respond to the observable property changes.\",\n \"anchor\": \"sample-onpropertychange\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"code\",\n \"title\": \"\",\n \"code\": \"$(person.address).on(\\\"propertyChange\\\", changeHandler); \"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Modify the value of a property on a chosen path:\",\n \"code\": \"$.observable(person).setProperty(\\\"address.street\\\", \\\"1st Ave\\\");\\n\"\n }\n ],\n \"code\": \"var person = {\\n address: {\\n street: \\\"1st Ave\\\"\\n }\\n};\\n\\n$(\\\"#modify\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"Main St\\\");\\n});\\n\\n$(\\\"#revert\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"1st Ave\\\");\\n});\\n\\n$(person.address).on(\\\"propertyChange\\\", changeHandler); \\n\\nfunction changeHandler(ev, eventArgs) {\\n var message = \\\"The '\\\" + eventArgs.path + \\\"' is '\\\" + eventArgs.value + \\\"'.\\\";\\n $(\\\"#messages\\\").append(message + \\\"
\\\");\\n}\",\n \"html\": \"\\n\\n\\n
\",\n \"title\": \"\",\n \"height\": \"110\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample: Observable property change, with $.observe(...)\",\n \"text\": \"This sample uses $.observe() to listen to the observable property changes.\",\n \"anchor\": \"sample-observe\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"code\",\n \"title\": \"\",\n \"code\": \"$.observe(person, \\\"address.street\\\", changeHandler);\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Modify the value of a property on a chosen path:\",\n \"code\": \"$.observable(person).setProperty(\\\"address.street\\\", \\\"Main St\\\");\"\n }\n ],\n \"code\": \"var person = {\\n address: {\\n street: \\\"1st Ave\\\"\\n }\\n};\\n\\n$(\\\"#modify\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"Main St\\\");\\n});\\n\\n$(\\\"#revert\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\\"address.street\\\", \\\"1st Ave\\\");\\n});\\n\\n$.observe(person, \\\"address.street\\\", changeHandler); \\n\\nfunction changeHandler(ev, eventArgs) {\\n var message = \\\"The '\\\" + eventArgs.path + \\\"' is '\\\" + eventArgs.value + \\\"'.\\\";\\n if (ev.data) {\\n message += \\\"\\\\n\\\\nThe full path is '\\\" + ev.data.fullPath + \\\"'.\\\";\\n }\\n $(\\\"#messages\\\").append(message + \\\"
\\\");\\n}\",\n \"html\": \"\\n\\n\\n
\",\n \"height\": \"110\",\n \"title\": \"\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"
\",\n \"title\": \"\",\n \"height\": \"150\"\n },\n {\n \"_type\": \"links\",\n \"title\": \"See also:\",\n \"links\": [],\n \"topics\": [\n {\n \"_type\": \"topic\",\n \"hash\": \"removeprop\",\n \"label\": \"$.observable(object).removeProperty()\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"namespaces\",\n \"label\": \"Namespaces (advanced)\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"delay\",\n \"label\": \"Async or batched events (advanced)\"\n }\n ]\n }\n ]\n },\n \"arrchange\": {\n \"title\": \"Modify an array observably\",\n \"path\": \"\",\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"Use `$.observable(myArray)` to obtain an observable array -- which provides methods for making observable changes to the array:\"\n },\n {\n \"_type\": \"links\",\n \"title\": \"\",\n \"links\": [],\n \"topics\": [\n {\n \"hash\": \"insert\",\n \"label\": \"$.observable(array).insert()\"\n },\n {\n \"hash\": \"remove\",\n \"label\": \"$.observable(array).remove()\"\n },\n {\n \"hash\": \"move\",\n \"label\": \"$.observable(array).move()\"\n },\n {\n \"hash\": \"refresh\",\n \"label\": \"$.observable(array).refresh()\"\n }\n ]\n },\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"(See also: *[Observable objects and arrays](#$observable)*)\\n\"\n }\n ]\n },\n \"insert\": {\n \"title\": \"Making observable changes: $.observable(array).insert()\",\n \"path\": \"\",\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"Changing an array observably: inserting items\",\n \"text\": \"If you pass an array to `$.observable()`, you obtain an observable array (a very lightweight wrapper around your array) which provides methods for modifying the array observably, including an `insert()` method:\"\n },\n {\n \"_type\": \"api\",\n \"typeLabel\": \"API:\",\n \"title\": \"$.observable(myArray).insert(index, insertedItems)\",\n \"name\": \"insert\",\n \"object\": \"$.observable(array)\",\n \"method\": true,\n \"returns\": \"this\",\n \"signatures\": [\n {\n \"_type\": \"signature\",\n \"title\": \"\",\n \"params\": [\n {\n \"_type\": \"param\",\n \"name\": \"index\",\n \"type\": \"integer\",\n \"optional\": true,\n \"description\": \"Optional index at which insertion will begin. If not specified, items are appended.\"\n },\n {\n \"_type\": \"param\",\n \"name\": \"insertedItems\",\n \"type\": \"any\",\n \"optional\": false,\n \"description\": \"item, or array of items, to be inserted\"\n }\n ],\n \"args\": [],\n \"sections\": [],\n \"example\": \"$.observable(people).insert(3, insertedItems);\",\n \"description\": \"Observably append or insert an item, or set of items\"\n }\n ],\n \"description\": \"Insert or append one or more items to an array\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample: Appending to an array:\",\n \"text\": \"Here is a sample using `insert()` to append an item to an array.\\n\\nA data-linked template responds to the observable array changes.\",\n \"anchor\": \"append\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"template\",\n \"title\": \"\",\n \"markup\": \"var tmpl = $.templates(\\\"id: {{:id}}
\\\");\\n\\ntmpl.link(\\\"#result\\\", things);\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Append an item:\",\n \"code\": \"$.observable(things).insert(\\n {id: \\\"item\\\" + count++}\\n);\"\n }\n ],\n \"code\": \"var things = [{id: \\\"item1\\\"}, {id: \\\"item2\\\"}],\\n count = 3;\\n\\n$(\\\"#append\\\").on(\\\"click\\\", function() {\\n $.observable(things).insert(\\n {id: \\\"item\\\" + count++}\\n );\\n});\\n\\n$(\\\"#insert2\\\").on(\\\"click\\\", function() {\\n $.observable(things).insert(\\n [\\n {id: \\\"item\\\" + count++},\\n {id: \\\"item\\\" + count++}\\n ]\\n );\\n});\\n\\nvar tmpl = $.templates(\\\"id: {{:id}}
\\\");\\n\\ntmpl.link(\\\"#result\\\", things);\",\n \"html\": \"
lastNamephones (array), or changes if a new array is assigned to the phones propertystreet property of the address property of personperson1: changes to lastName and any address propertyperson2: changes to firstNameperson3: changes to any property of the person3 object itself, and to any property of the person3.address objecttarget: the object which changeddata: JsViews metadata, including: fullPath (the data-linking path such as \\\"address.street\\\")ev.data object is also passed to the handler as this pointer)\"\n },\n {\n \"_type\": \"param\",\n \"name\": \"eventArgs\",\n \"type\": \"object\",\n \"optional\": false,\n \"description\": \"JsViews event object for property or array changes, with properties change and additional properties specific to the 'change' type:path, value and oldValue. (With change=\\\"set\\\")index and items. (With change=\\\"insert\\\")index and numToRemove. (With change=\\\"remove\\\")oldIndex, index and items. (With change=\\\"move\\\")eventArgs object for each of these events will have an additional property: refresh = true (together with the usual change=\\\"insert\\\" / \\\"remove\\\" / \\\"move\\\" etc.)change=\\\"refresh\\\" event will be triggered, which will also have an oldItems property$.observe(...) or $.observable(object).observeAll(...)\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"handler-api\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Samples:\",\n \"text\": \"Here is a sample showing `$.observe(person, \\\"name\\\", \\\"address^*\\\", changeHandler);`\",\n \"anchor\": \"samples\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"Register a handler for changes: \",\n \"text\": \"We handle changes in the `name` and `address` properties of the `person`, and any property of the `address`:\\n\\n```js\\n$.observe(person, \\\"name\\\", \\\"address^*\\\", changeHandler);\\n```\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Define the handler:\",\n \"code\": \"function changeHandler(ev, eventArgs) {\\n var message = ... + eventArgs.path + ... + eventArgs.value ...;\\n ...\\n}\"\n },\n {\n \"_type\": \"template\",\n \"title\": \"Template also binds to 'deep paths'\",\n \"markup\": \"\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Modify values through template binding or buttons:\",\n \"code\": \"$(\\\"#changeAddress\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\n \\\"address\\\", \\n {\\n street: \\\"New Street\\\",\\n ZIP: \\\"99999\\\"\\n }\\n...\"\n }\n ],\n \"code\": \"var person = {\\n name: \\\"Pete\\\",\\n address: {\\n street: \\\"1st Ave\\\",\\n ZIP: \\\"34009\\\"\\n }\\n};\\n\\n$(\\\"#modify\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty({\\n name: \\\"Hermione\\\",\\n \\\"address.street\\\": \\\"Main St\\\",\\n \\\"address.ZIP\\\": \\\"45008\\\"\\n });\\n});\\n\\n$(\\\"#changeAddress\\\").on(\\\"click\\\", function() {\\n $.observable(person).setProperty(\\n \\\"address\\\", \\n {\\n street: \\\"New Street\\\",\\n ZIP: \\\"99999\\\"\\n }\\n );\\n});\\n\\n$(\\\".clear\\\").on(\\\"click\\\", function() {\\n $(\\\".messages\\\").empty();\\n});\\n\\nvar tmpl = $.templates(\\\"#personTmpl\\\");\\n\\ntmpl.link(\\\"#result\\\", person);\\n\\n$.observe(person, \\\"name\\\", \\\"address^*\\\", changeHandler);\\n\\nfunction changeHandler(ev, eventArgs) {\\n var message = \\\"The new \\\" + eventArgs.path + \\\" is \\\"\\n + $.views.converters.encode(JSON.stringify(eventArgs.value)) + \\\".\\\";\\n // (Note that we encode < > and & as HTML entities, for display)\\n\\n $(\\\".messages\\\").append(\\\"target: the object which changeddata: JsViews metadata, including: fullPath (the data-linking path which will be \\\"*\\\", since this is observeAll)observeAll (a helper object with methods path, parents and filter, see below)change and additional properties specific to the 'change' type:path, value and oldValue. (With change=\\\"set\\\")index and items. (With change=\\\"insert\\\")index and numToRemove. (With change=\\\"remove\\\")oldIndex, index and items. (With change=\\\"move\\\")eventArgs object for each of these events will have an additional property: refresh = true (together with the usual change=\\\"insert\\\" / \\\"remove\\\" / \\\"move\\\" etc.)change=\\\"refresh\\\" event will be triggered, which will also have an oldItems property$.observable(object).observeAll(myHandler)\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api-handler\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Sample:\",\n \"text\": \"We'll use the `observeAll()` API to provide an alternative version of our [last sample](#observe@all-phones) in the [`$.observe()`](#observe) topic.\\n\\nThis allows us to include listening to newly added items in the phone array. \\n\\n(But in this version we use `$observeAll()` directly, rather than using the `**` wild card as we did in that sample.)\",\n \"anchor\": \"phones\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"A single observeAll() call for observing all the objects\",\n \"text\": \"Even `phone` objects added to the `phones` array will automatically be 'listened' to by our handler, without us needing to write any additional code.\\n\\n```js\\n$.observable(person).observeAll(changeHandler);\\n```\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Define our handler:\",\n \"code\": \"function changeHandler(ev, eventArgs) {\\n var message = \\\"\\\";\\n if (ev.data.observeAll) {\\n message += \\\"$.observable(object).observeAll(myHandler, myFilter)\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api-filter\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"observeAll() with View Model object hierarchies\",\n \"text\": \"The `observeAll()` API works equally well with View Model objects or plain objects. See *[JsViews: Data / View Model](#jsvmodel)*. At the end of that topic we show modified versions of our `observeAll()` sample above, [using](#jsvmodel@linkvmsample) 'hand-coded' View Model objects, or [using](#jsvmodel@compilevmsample) compiled View Model objects.\",\n \"anchor\": \"vm\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"observeAll() and \\\"**\\\" paths\",\n \"text\": \"As an alternative to using the `observeAll()` API, it is sometimes simpler to use the `**` ***all*** *wild card* path in association with `$.observe()`, or with computed observables, as shown [here](#observe@all) and [here](#computed@depends-all). \",\n \"anchor\": \"all-wildcard\"\n },\n {\n \"_type\": \"links\",\n \"title\": \"See also:\",\n \"links\": [],\n \"topics\": [\n {\n \"_type\": \"topic\",\n \"hash\": \"unobserveAll\",\n \"label\": \"unobserveAll()\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"observe\",\n \"label\": \"observe()\"\n },\n {\n \"_type\": \"topic\",\n \"hash\": \"namespaces\",\n \"label\": \"Namespaces\"\n }\n ]\n }\n ]\n },\n \"unobserveAll\": {\n \"title\": \"$.observable().unobserveAll()\",\n \"path\": \"\",\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"Just as `$.observable(objectOrArray).observeAll(myHandler)` will traverse the whole hierarchy of objects or arrays under the root `objectOrArray` and attach the handler to each object, similarly `$.observable(objectOrArray).unobserveAll(myHandler)` will traverse the whole hierarchy and remove the handler from any object to which it has been attached.\"\n },\n {\n \"_type\": \"api\",\n \"typeLabel\": \"API:\",\n \"title\": \"$.observable(objectOrArray).unobserveAll(myHandler)\",\n \"name\": \"unobserveAll\",\n \"object\": \"$.observable(obOrArray)\",\n \"method\": true,\n \"returns\": \"\",\n \"signatures\": [\n {\n \"_type\": \"signature\",\n \"title\": \"\",\n \"params\": [\n {\n \"_type\": \"param\",\n \"name\": \"myHandler\",\n \"type\": \"function\",\n \"optional\": true,\n \"description\": \"Event handler that was registered\"\n },\n {\n \"_type\": \"param\",\n \"name\": \"myFilter\",\n \"type\": \"function\",\n \"optional\": true,\n \"description\": \"Filter function\"\n }\n ],\n \"args\": [],\n \"sections\": [],\n \"example\": \"$.observable(person).unobserveAll(myHandler); \",\n \"description\": \"Remove handler from object/array and from all nested objects\"\n },\n {\n \"_type\": \"signature\",\n \"title\": \"\",\n \"params\": [],\n \"args\": [],\n \"sections\": [],\n \"example\": \"$.observable(person).unobserveAll(); \",\n \"description\": \"Remove all handlers for observable changes, from an object/array and from all nested objects\"\n }\n ],\n \"description\": \"Remove a handler for observable changes, from an object or array, and from any nested objects or arrays under it\",\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"sample\": \"sample\",\n \"links\": \"links\"\n },\n \"anchor\": \"api\"\n },\n {\n \"_type\": \"para\",\n \"title\": \"Samples:\",\n \"text\": \"Here is a copy of a sample from the `.observeAll()` topic, on which we have used `observeAll`/`unobserveAll` to provide an enable/disable checkbox on the Change Log:\"\n },\n {\n \"_type\": \"sample\",\n \"typeLabel\": \"Sample:\",\n \"codetabs\": [],\n \"sectionTypes\": {\n \"para\": \"para\",\n \"data\": \"data\",\n \"template\": \"template\",\n \"code\": \"code\",\n \"links\": \"links\"\n },\n \"sections\": [\n {\n \"_type\": \"para\",\n \"title\": \"\",\n \"text\": \"```jsr\\n\\n```\\n\\n```js\\n$(\\\"#attach\\\").on(\\\"click\\\", function(x) {\\n logChanges(this.checked);\\n});\\n```\"\n },\n {\n \"_type\": \"code\",\n \"title\": \"Call unobserveAll() on the root, to stop 'listening'...\",\n \"code\": \"function logChanges(enable) {\\n if (enable) {\\n $.observable(person).observeAll(changeHandler);\\n } else {\\n $.observable(person).unobserveAll(changeHandler);\\n }\\n}\"\n }\n ],\n \"html\": \"~keyName\"\r\n }\r\n ],\r\n \"sections\": [],\r\n \"example\": \"myTmpl.link(\\\"#container\\\", myData, myHelpers);\",\r\n \"description\": \"Render and link template against data (as content of container element) and pass in helpers\"\r\n }\r\n ],\r\n \"description\": \"Render and link template against data, under a container element, along with helper objects or context\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"sample\": \"sample\",\r\n \"links\": \"links\"\r\n },\r\n \"anchor\": \"apihelpers\"\r\n },\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"You can pass in any JavaScript type (object, string, number, function...) as helpers on the `helpersOrContext` object, and use them as metadata, or as helper functions for formatting etc.\\n\\nNote: By passing in helpers in this way, you are making them specific to this `link()` call. Alternatively, you can declare helpers globally, -- and you can also declare helpers that are private to a specific template. See *[Registering helpers: `$.views.helpers()`](#helpers)* for details...\\n\\nWithin the template, helpers (whether global, or passed in to the `link()` method) are accessed by *helper paths*: `~keyName...`. \\n\\nFor example you might pass in an object with some utility functions:\\n\\n```js\\nvar myHelpers = {\\n util: {\\n split: function(val, part) {...},\\n ...\\n },\\n ...\\n};\\n\\nmyTmpl.link(\\\"#container\\\", myData, myHelpers);\\n```\\n\\n-- and access them in the template using a *helper path* such as:\\n\\n```jsr\\n{^{:~util.split(fullName, 0)}}\\n```\\nor\\n```jsr\\n\\n```\\n\\nSee *[Registering helpers](#helpers)*\"\r\n },\r\n {\r\n \"_type\": \"sample\",\r\n \"typeLabel\": \"Sample:\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"links\": \"links\"\r\n },\r\n \"sections\": [\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"Code:\\n\\n```js\\nfunction toUpper(val) {...}\\n\\nvar myHelpers = {color: \\\"red\\\", format: toUpper};\\n\\nmyTmpl.link(\\\"#person\\\", person, myHelpers);\\n```\\n\\nTemplate:\\n\\n```jsr\\n~keyName\"\r\n },\r\n {\r\n \"_type\": \"param\",\r\n \"name\": \"noIteration\",\r\n \"type\": \"boolean\",\r\n \"optional\": true,\r\n \"description\": \"Pass in parameter true, to prevent iteration on array data\"\r\n }\r\n ],\r\n \"args\": [],\r\n \"sections\": [],\r\n \"example\": \"myTmpl.link(\\\"#container\\\", data, helpers, true);\",\r\n \"description\": \"Render and link template against data (as content of container element) and pass in helpers. Determine iteration behavior for arrays\"\r\n }\r\n ],\r\n \"description\": \"Render and link template against data, under a container element, along with helpers/context. Determine iteration behavior for arrays\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"sample\": \"sample\",\r\n \"links\": \"links\"\r\n },\r\n \"anchor\": \"apinoiteration\"\r\n },\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"By passing in `true` as the fourth *'noIteration'* parameter, (or as third parameter if no `helpersOrContext` are passed), the template renders just once, with the array itself as current data, rather than rendering once for each item in the array.\\n\\nWithin the template, `{^{for}}` (or equivalently `{^{for #data}}`) can be used to iterate over the array, as in the following example:\"\r\n },\r\n {\r\n \"_type\": \"sample\",\r\n \"typeLabel\": \"Sample:\",\r\n \"codetabs\": [],\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"links\": \"links\"\r\n },\r\n \"sections\": [\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"Code:\\n\\n```js\\nmyTmpl.link(\\\"#peopleList\\\", people, true); // helpersOrContext not passed (so undefined), and noIteration set to true\\n```\\n\\nTemplate:\\n\\n```jsr\\n| \\n {^{:#data.length}} people\\n | |
|---|---|
| {^{>name}} | \\n |
~keyName\"\r\n }\r\n ],\r\n \"sections\": [],\r\n \"example\": \"var html = $.render.myTmpl(myData, myHelpers);\",\r\n \"description\": \"Render template against data, and pass in helpers\"\r\n }\r\n ],\r\n \"description\": \"Render a named template against data, along with helper objects or context, and return a string\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"sample\": \"sample\",\r\n \"links\": \"links\"\r\n }\r\n },\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"Here is an example:\"\r\n },\r\n {\r\n \"_type\": \"sample\",\r\n \"typeLabel\": \"Sample:\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"links\": \"links\"\r\n },\r\n \"sections\": [\r\n {\r\n \"_type\": \"code\",\r\n \"title\": \"\",\r\n \"code\": \"$.templates(\\\"personTmpl\\\", \\\"#personTemplate\\\");\\n\\nvar html = $.render.personTmpl(person);\"\r\n }\r\n ],\r\n \"html\": \"~keyName\"\r\n },\r\n {\r\n \"_type\": \"param\",\r\n \"name\": \"noIteration\",\r\n \"type\": \"boolean\",\r\n \"optional\": true,\r\n \"description\": \"Pass in parameter true, to prevent iteration on array data\"\r\n }\r\n ],\r\n \"sections\": [],\r\n \"example\": \"$.link.myTmpl(\\\"#container\\\", myData, myHelpers, true);\",\r\n \"description\": \"Render and link template against data as content of a container element. Optionally pass in helpers and specify iteration behavior for arrays\"\r\n }\r\n ],\r\n \"description\": \"Render and link a named template against data, under a container element. (Optionally provide helpers/context and specify iteration behavior for arrays)\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"sample\": \"sample\",\r\n \"links\": \"links\"\r\n }\r\n },\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"Here is an example:\"\r\n },\r\n {\r\n \"_type\": \"sample\",\r\n \"typeLabel\": \"Sample:\",\r\n \"sectionTypes\": {\r\n \"para\": \"para\",\r\n \"data\": \"data\",\r\n \"template\": \"template\",\r\n \"code\": \"code\",\r\n \"links\": \"links\"\r\n },\r\n \"sections\": [\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"\",\r\n \"text\": \"```js\\n$.templates(\\\"personTmpl\\\", \\\"#personTemplate\\\");\\n\\nvar myHelpers = {color: \\\"red\\\", format: toUpper};\\n\\n$.link.personTmpl(\\\"#person\\\", person, myHelpers);\\n```\\n\\n```jsr\\n{{: ...}} tag\",\r\n \"text\": \"In fact it is short for this full syntax:\\n\\n```jsr\\n\\n```\\n\\n-- which is a data-linked version of the familiar JsRender tag: `{{:pathOrExpression}}`. \\n\\nExamples:\\n\\n```jsr\\n\\n\\n 1}\\\">\\n\\n\\n\\n```\",\r\n \"anchor\": \"full\"\r\n },\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"Optional two-way data-binding\",\r\n \"text\": \"Notice the full syntax for the `` has an additional `:` before the `}` at the end. It corresponds to the two-way data binding. (The same applies to other *'user input elements'* such as `select`, `textarea` etc. (and also *[contenteditable elements](#)*). \\n\\nYou can provide both convert and convertBack converters if you want. (See the *[Two-way binding and converters](#samples/form-els/converters)* sample):\\n\\n```jsr\\n\\n\\n\\n```\\n\\nIf you want only one-way binding (from the data to the ``) you simply eliminate the `:` at the end:\\n\\n```jsr\\n\\n```\\n\\nSee the *[Two-way binding](#link2way)* topic for additional details.\",\r\n \"anchor\": \"twoway\"\r\n },\r\n {\r\n \"_type\": \"para\",\r\n \"title\": \"Full syntax – multiple targets, multiple tags, multiple bindings...\",\r\n \"text\": \"The full syntax allows you to bind multiple expressions each to a different target, and is written like this: `data-link=\\\"target1{linkExpression1} target2{linkExpression2} ...\\\"`.\\n\\nPossible targets include the following:\\n- an HTML attribute (such as `title{...}`, `class{...}`, `id{...}`, `disabled{...}` or `data-foo{...}`\\n)\\n- an HTML element property (such as `prop-muted{...}` for a `