Access viewModel in javascript function outside viewModel's scope

Question

I'm wondering if I can access the knockout.js main viewModel from a method outside the scope of the viewModel itself. Take this example:

function Employee(data) {   var self = this;   ko.mapping.fromJS(data, {}, this); }  function EmployeeViewModel() {   var self = this;   this.employees = ko.observableArray([]);    this.loadEmployees = function() {     var mappedEmployees= $.map(JSON.parse(data.value), function(item) { return new Employee(item) });     self.employees (mappedEmployees);   } }  // here's the part I'm curious about $(document).ready(function() {   ko.applyBindings(new EmployeeViewModel());      $("#myLink").click(function() {      // is there some way to get back into the ko context here?      // like with ko.dataFor or ko.contextFor?   }); } 

Answer 1

You can always access it just by storing your viewmodel in a variable you can access, the module and revealing module patterns are nice, but you can just store it in an object that won't conflict with other names ('my' here):

my = { viewModel: new EmployeeViewModel() }; ko.applyBindings(my.viewModel); 

You had the right idea, you just need to take the element as an argument to your click function and pass the target property to ko.dataFor or ko.contextFor (jsfiddle):

$(document).ready(function() {     my.vm = new EmployeeViewModel();     ko.applyBindings(my.vm);     $('button').on('click', function(e) {         alert('you clicked on employee ' + ko.contextFor(e.target).$data.name() +              ' also known as ' + ko.dataFor(e.target).name());     }); });​ 

Instead of using jQuery to bind the click event, you can always use the Knockout click binding, which passes the current model data as the first parameter and the event as the second parameter (jsfiddle):

function EmployeeViewModel() {   var self = this;    // skipped some of your code    this.clickedOnEmployee = function(model, event) {     // assuming your Employee has a name observable     alert('You clicked on employee ' + model.name());   }; } 

In your html (the $root is your base view model, you wouldn't need it if your clickedOnEmployee function was on your Employee objects):

<ul data-bind="foreach: employees">     <li>         <span data-bind="text: name"></span>         <button data-bind="click: $root.clickedOnEmployee">show</button>     </li> </ul>