Knockoutjs 如何从外部函数访问视图模型

Question

我在Access viewModel in javascript function outside viewModel's scope 中找到了一些与我正在尝试做的事情类似的例子，但我无法弄清楚在我的特定情况下该怎么做。我有几位老师，显示他们的薪水以及总薪水，但想显示他们薪水与总薪水的相对百分比。这是我的看法：

<table>
    <tr>
    <th></th>
    <th>Salary</th>
    <th>Salary Percent</th>
    </tr>
    <tbody data-bind="foreach: teachers">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: salary"></td>
        <td data-bind="text: salaryPercent"></td>
    </tr>
    </tbody>
    <tr>
    <td>Total Salary</td>
    <td data-bind="text: totalSalary"></td>
    </tr>
</table>

查看模型：

var Teacher = function(id, name, salary) {
    this.id = id;
    this.name = name;
    this.salary = salary;
    this.salaryPercent = ko.computed(function() {
        // return accounting.toFixed((this.salary/178000)*100, 0) + '%';    // works with hard-coded total salary
        return accounting.toFixed((this.salary/viewModel.totalSalary)*100, 0) + '%';
        // return this.salary;    // works, returns the same salary as this.salary above
    }, this);
};

var viewModel = function(teachers) {
    var self = this;
    self.teachers = ko.observableArray(teachers);
    self.totalSalary = ko.computed(function() {
        var total = 0;
        ko.utils.arrayForEach(self.teachers(), function(teacher) { total += teacher.salary; });
        return total;
    });
};

var initialTeachers = [
    new Teacher(1, "Tom", 40000),
    new Teacher(2, "Betty", 41000),
    new Teacher(3, "Charles", 45000),
    new Teacher(4, "Daniel", 52000)
];

var vm = new viewModel(initialTeachers);
ko.applyBindings(vm);

和css：

td, th {
    border: solid 1px black;
    padding: 2px;
}

JSFiddle

TIA，史蒂夫

注意：我使用的是 jsfiddle 附带的 accounting.js 库。

Answer 1

This JSFiddle 做你想做的事情。我在viewModel、calculateSalaryPercent 中添加了一个函数，它以薪水为参数。我从Teacher 中删除了salaryPercent，因为它现在是在更高的级别上计算的。

一个简短的说明：调用 accounting.toFixed 时使用零位小数可能会导致百分比加起来小于 100%。

Answer 2

除了 gorilly 的解决方案之外，另一种方法是使用敲除的绑定上下文 $parent 直接在视图本身上构建逻辑。

但是这种解决方案对于追求“无逻辑模板”的人（不是我）来说是丑陋的。

http://jsfiddle.net/2tgqb4gg/27/

<tbody data-bind="foreach: teachers">
 <tr>
  <td data-bind="text: name"></td>
  <td data-bind="text: salary"></td>
  <td data-bind="text: accounting.toFixed(salary/$parent.totalSalary()*100,0)+'%'"></td>
 </tr>
</tbody>