Skip to main content
Other link must have been hacked, endless popups.
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116

You can always access it just by storing your viewmodel in a variable you can access, the module and revealing module patternsmodule 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>

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>

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>
fixed jsfiddles with broken ko.mapping url
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116

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 (jsfiddlejsfiddle):

$(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 (jsfiddlejsfiddle):

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>

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>

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>
another example with ko.contextFor and ko.dataFor, cleaned up and put direct answer to question first
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116

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 valuedata 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: $parent$root.clickedOnEmployee">show</button>
    </li>
</ul>

Here's a jsfiddle which shows passing more to the event handling method, the second parameter is by default an event that you can use the target property to see the control that was clicked.

If you really want to bind with jQuery, you can use ko.contextFor(node) to get the context active on a node, and it's $data property to get the bound object 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());
    });
});​

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

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

In your html:

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

Here's a jsfiddle which shows passing more to the event handling method, the second parameter is by default an event that you can use the target property to see the control that was clicked.

If you really want to bind with jQuery, you can use ko.contextFor(node) to get the context active on a node, and it's $data property to get the bound object 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());
    });
});​

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>
another example with ko.contextFor
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116
Loading
deleted 236 characters in body
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116
Loading
added info on knockout click binding
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116
Loading
Source Link
Jason Goemaat
  • 29.1k
  • 15
  • 87
  • 116
Loading