{"id":814,"date":"2022-08-30T15:07:37","date_gmt":"2022-08-30T15:07:37","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/do-i-have-to-use-the-knockout-with-binding-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:07:37","modified_gmt":"2022-08-30T15:07:37","slug":"do-i-have-to-use-the-knockout-with-binding-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/do-i-have-to-use-the-knockout-with-binding-collection-of-common-programming-errors\/","title":{"rendered":"Do I have to use the knockout with binding?-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m fairly new to knockout and trying to understand how some of the bindings should work.<\/p>\n<p>I thought that I could reference a child observable in a normal binding without the need for with but I cannot get it working.<\/p>\n<p>My model and view model are;<\/p>\n<pre><code>        Model = function(name) {\n            this.name = ko.observable(name);\n        };\n\n        ViewModel = function () {\n\n\n            var list = ko.observableArray([new Model(\"Apple\"), new Model(\"Pear\")]),\n                selectedItem = ko.observable();\n\n            function selectItem(item) {\n                selectedItem(item);\n            }\n\n            return {\n                list: list,\n                selectedItem: selectedItem,\n                selectItem: selectItem\n            };\n        };\n<\/code><\/pre>\n<p>and here are the bindings:<\/p>\n<pre><code>        \n        <\/code><\/pre>\n<ul id=\"list\" data-bind=\"foreach: list\"><\/ul>\n<pre>\n    \n\n    <br \/>Will show selected item\n    \n        \n    \n    \n        <br \/>Won't show selected item\n        \n    \n<\/pre>\n<p><code>Alternatively a working fiddle is here.<\/code><\/p>\n<p><code>As far as I understood I should be able to see a value for <code>selectedItem().name<\/code> but the apply bindings is throwing an error, however it works perfectly if the div has the <code>with: selectedItem<\/code> binding.<\/code><\/p>\n<p>Do I have no optin but to use the <code>with<\/code> binding in this type of scenario?<\/p>\n<ol>\n<li>\n<p>The <code>with<\/code> bending beside setting the binding context also handles the case when the value is <code>null<\/code> or <code>undefinied<\/code>.<\/p>\n<p>From the documentation<\/p>\n<blockquote>\n<p>If the expression you supply evaluates to <code>null<\/code> or <code>undefined<\/code> <strong>descendant elements will not be bound at all<\/strong>, but will instead be removed from the document.<\/p>\n<\/blockquote>\n<p>If you don&#8217;t want to use the <code>with<\/code> you have to handle the <code>null<\/code> or <code>undefinied<\/code> case &#8220;by hand &#8221; so you can only call <code>name()<\/code> if the <code>selectedItem()<\/code> returned something.<\/p>\n<p>This can be done with the statement <code>selectedItem() &amp;&amp; selectedItem().name()<\/code>. (<code>null<\/code>, the empty string and <code>undefinied<\/code> evaluates to <code>false<\/code> evertying else is to <code>true<\/code>.)<\/p>\n<p>So the following binding is working:<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>Demo JSFiddle.<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-09 22:47:10. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I&#8217;m fairly new to knockout and trying to understand how some of the bindings should work. I thought that I could reference a child observable in a normal binding without the need for with but I cannot get it working. My model and view model are; Model = function(name) { this.name = ko.observable(name); }; ViewModel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-814","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=814"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/814\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}