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

Question

我在在视图模型作用域外的javascript函数中访问viewModel中找到了一些类似的例子，但还没有弄清楚在我的特定情况下该做什么。我有几个教师，显示他们的工资，连同工资总额，但想显示他们的工资相对百分比，因为它涉及总额。以下是我的看法：

<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

蒂娅，史蒂夫

注意:我使用的是与jsfiddle一起包含的accounting.js库。

Answer 1

这个JSFiddle一开始就做你想做的事情。我在viewModel，calculateSalaryPercent中添加了一个函数，它以工资作为参数。我将salaryPercent从Teacher中删除，因为它现在是在更高的级别上计算的。

请注意:使用零小数位调用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>