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

推荐答案

您始终可以通过将视图模型存储在您可以访问的变量中来访问它，模块和揭示模块模式 很好，但你可以将它存储在不会与其他名称冲突的对象(此处为我的"):

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

您的想法是正确的，您只需将该元素作为点击函数的参数并将目标属性传递给 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());
    });
});​

您可以始终使用 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屋！