knockout.js - modify DOM in current item in list (expand list item subsection) using templates


In this example I want to use knockout.js to allow the "Expand" link to be clicked and have its text changed to "Collapse". I also want to set the make the jobDetails section visible. This is a very general question of how to get knockout.js to specifically modify the DOM of the "current" item in a list using a click handler.

<script type="text/html" id="job-template"> <div class="jobContainer"> <label data-bind="text: JobTitle"></label> <label data-bind="text: CompanyName"></label> <div class="jobDetails"> <label data-bind="text: City"></label> <label data-bind="text: State"></label> </di> <div> <a class="expand" href="#" data-bind="click: ???">Expand</a> </div> </div> </script>


This is very straight forward with KO. Here's a simple way to do it. FYI I had to fix your markup slightly.

<div> <div class="jobContainer"> <label data-bind="text: JobTitle"></label> <label data-bind="text: CompanyName"></label> <div class="jobDetails" data-bind="visible: expanded"> <label data-bind="text: City"></label> <label data-bind="text: State"></label> </div> <div> <a class="expand" href="#" data-bind="click: toggle, text: linkLabel">Expand</a> </div> var viewModel = function() { this.JobTitle = ko.observable("some job"); this.CompanyName = ko.observable("some company"); this.City = ko.observable("some city"); this.State = ko.observable("some state"); this.someValue = ko.observable().extend({ defaultIfNull: "some default" }); this.expanded = ko.observable(false); this.linkLabel = ko.computed(function () { return this.expanded() ? "collapse" : "expand"; }, this); this.toggle = function () { this.expanded(!this.expanded()); }; };

<a href="http://jsfiddle.net/madcapnmckay/XAzW6/" rel="nofollow">http://jsfiddle.net/madcapnmckay/XAzW6/</a>

Hope this helps.


  • Android onKey w/ virtual keyboard
  • How do I get the list of bad records that didn't load in Bigquery?
  • Disable Kendo Autocomplete
  • Django invalid literal for int() with base 10
  • xtable package: Skipping some rows in the output
  • Detect when Facebook like button is clicked
  • AJAX Html Editor Extender upload image appearing blank
  • Could not find rake using whenever rails
  • C++ Partial template specialization - design simplification
  • Q promise. Difference between .when and .then
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Importing jscolor library in angular 2
  • what is the difference between the asp.net mvc application and asp.net web application
  • jquery mobile loadPage not working
  • Data Validation Drop Down Box Arrow Disappearing
  • How to get icons for entities from eclipse?
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do you join a server to an Active Directory (domain)?
  • How do I configure my settings file to work with unit tests?
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • How to stop GridView from loading again when I press back button?
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Add sale price programmatically to product variations
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal
  • How do I use LINQ to get all the Items that have a particular SubItem?