StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In your custom binding you need to:</p> <ol> <li>Create an element for each of the items in the list</li> <li>Append that element to the parent</li> <li>Add a click handler to each element that sets the selectedItem on the original view model</li> </ol> <p>I've also highlighted the current selected item for clarity.</p> <pre><code>ko.bindingHandlers.myListView = { update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), //get the list of items items = value.items(), //get a reference to the selected item observable selectedItem = value.selectedItem, //get a jQuery reference to the element $element = $(element), //get the currently selected item currentSelected = selectedItem(); //clear the parent of any existing children $element.html(""); for (var index = 0; index < items.length; index++) { (function() { //get the list of items var item = ko.utils.unwrapObservable(items[index]), //create a child element with a click handler $childElement = $("<li>") .text(item.id() + " " + item.text()) .click(function() { //remove selected class on all siblings $(this).siblings().removeClass("selected"); //add selected class on this item $(this).addClass("selected"); //set the observable 'selected item' property on the source view model selectedItem(item); }); //add the selected class if this item is the current selected item if (item == currentSelected) { $childElement.addClass("selected"); } //add the child to the parent $element.append($childElement); })(); } } }; </code></pre> <p>Here's a <a href="http://jsfiddle.net/stevegreatrex/53xRL/5/" rel="nofollow">working example</a></p> <p>Note: As I am using the <code>update</code> instead of the <code>init</code> method it will work when updating the list of comments</p> <p><strong>Update</strong></p> <p>If you want to use the contents of the original DIV as the template for each created item, you need two additional steps:</p> <ol> <li>Grab the original content of the element when initialized and use that in place of the hard-coded content above</li> <li><p>Apply bindings to the created element before adding it to the DOM</p> <pre><code> ko.bindingHandlers.myListView = { init: function(element) { var $element = $(element), originalContent = $element.html(); $element.data("original-content", originalContent); return { controlsDescendantBindings: true } }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), //get the list of items items = value.items(), //get a reference to the selected item observable selectedItem = value.selectedItem, //get a jQuery reference to the element $element = $(element), //get the currently selected item currentSelected = selectedItem(), //get the current content of the element elementContent = $element.data("original-content"); $element.html(""); for (var index = 0; index < items.length; index++) { (function() { //get the list of items var item = ko.utils.unwrapObservable(items[index]), //create a child element with a click handler $childElement = $(elementContent) .click(function() { //remove selected class on all siblings $(this).siblings().removeClass("selected"); //add selected class on this item $(this).addClass("selected"); //set the observable 'selected item' property on the source view model selectedItem(item); }); ko.applyBindings(item, $childElement[0]); //add the selected class if this item is the current selected item if (item == currentSelected) { $childElement.addClass("selected"); } //add the child to the parent $element.append($childElement); })(); } } </code></pre> <p>};</p></li> </ol> <p>Note that we have to prevent the content of the div being processed by knockout by returning <code>{ controlsDescendantBindings: true }</code> from our <code>init</code> method.</p> <p>Here is an <a href="http://jsfiddle.net/stevegreatrex/53xRL/9/" rel="nofollow">updated example</a></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