访问viewModel在javascript函数外面的viewModel的范围 [英] Access viewModel in javascript function outside viewModel's scope

问题描述

我想知道是否可以从viewModel本身范围之外的方法访问knockout.js主视图模型。举个例子：

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?
  });
}

推荐答案

只要将viewmodel存储在可以访问的变量中即可访问，模块和显示模块模式是好的，但你可以将它存储在一个对象这不会与其他名称冲突（我的）：

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);

你有正确的想法，你只是需要拿ele作为您的点击功能的参数，并将目标属性传递给ko.dataFor或ko.contextFor（ jsfiddle ）：

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());
    });
});​

而不是使用jQuery绑定点击事件，您可以随时使用 Knockout点击绑定，它将当前模型数据作为第一个参数传递，并且事件作为第二个参数（ jsfiddle ）：

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());
  };
}

在你的html（$ root是你的基本视图模型，如果您的clickedOnEmployee函数在您的Employee对象上，则不需要它）：

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>

这篇关于访问viewModel在javascript函数外面的viewModel的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！