Databases
StackOverflow2013
Postsdbo
PODo I have to use the knockout with binding?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODo I have to use the knockout with binding?
    text
    copied!<p>I'm fairly new to knockout and trying to understand how some of the bindings should work.</p> <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> <p>My model and view model are;</p> <pre><code> Model = function(name) { this.name = ko.observable(name); }; ViewModel = function () { var list = ko.observableArray([new Model("Apple"), new Model("Pear")]), selectedItem = ko.observable(); function selectItem(item) { selectedItem(item); } return { list: list, selectedItem: selectedItem, selectItem: selectItem }; }; </code></pre> <p>and here are the bindings:</p> <pre><code> &lt;div id="content"&gt; &lt;ul id="list" data-bind="foreach: list"&gt; &lt;li data-bind="text: name, click: $parent.selectItem"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;p&gt;Will show selected item&lt;/p&gt; &lt;div data-bind="with: selectedItem"&gt; &lt;span data-bind="text: name"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;Won't show selected item&lt;/p&gt; &lt;span data-bind="text: selectedItem().name()"&gt;&lt;/span&gt; &lt;/div&gt; </code></pre> <p>Alternatively a working <a href="http://jsfiddle.net/nathan_g/d9HEG/2/" rel="nofollow">fiddle</a> is here.</p> <p>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.</p> <p>Do I have no optin but to use the <code>with</code> binding in this type of scenario?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload