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中添加了一个函数，它以薪水作为参数。我从salaryPercent移除了Teacher，因为它现在已经计算得更高了。

一个简单说明：调用accounting.toFixed小数位数为零会导致百分比加起来小于100％。

Answer 2

除了gorilly的解决方案，另一种方法是使用knockout的绑定上下文$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>

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

2 个答案: