jquery - Knockout.js:如何根据另一个可观察数组更新属性
问题描述
我如何根据另一列值更改来更改一列的值。在下面的代码中,我想使用标记列值更改来更新 % 列。
HTML:
<table data-bind="foreach: users()">
<thead class="flip-content table-head">
<tr>
<th align="center">Name</th>
<th align="center">Marks</th>
<th align="center">% out of 100</th>
</tr>
</thead>
<tr >
<td data-bind="text: $data.name()"> </td>
<td>
<input data-bind="value: $data.marks()" />
</td>
<td data-bind='text: $data.percent()'></td>
</tr>
</table>
脚本:
var UserModel = function () {
this.users = ko.observableArray([
{
id: 1,
name: ko.observable('Bob'),
marks: ko.observable(0),
percent: ko.computed(function () {
//percentage formula
}, this)
},
{
id: 2,
name: ko.observable('Jane'),
marks: ko.observable(0),
percent: ko.computed(function () {
//percentage formula
}, this)
}
]);
this.selectedUser = ko.observable(this.users()[0]);
}
var userModel = new UserModel();
ko.applyBindings(userModel);
我怎么能做到这一点。
解决方案
最简单和最常见的解决方案是使用“类”实例而不是普通对象。这些允许您轻松选择正确的marks
值,因为在构造函数内部,this
指的是当前用户。
var User = function(id, name, marks) {
this.id = id;
this.name = name;
this.marks = ko.observable(marks);
this.percent = ko.pureComputed(function() {
return this.marks() + "%";
}, this);
}
var UserModel = function () {
this.users = ko.observableArray([
new User(1, "Bob", 10),
new User(2, "Alice", 30),
]);
this.selectedUser = ko.observable(this.users()[0]);
}
var userModel = new UserModel();
ko.applyBindings(userModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table data-bind="foreach: users()">
<thead class="flip-content table-head">
<tr>
<th align="center">Name</th>
<th align="center">Marks</th>
<th align="center">% out of 100</th>
</tr>
</thead>
<tr >
<td data-bind="text: name"> </td>
<td>
<input data-bind="value: marks" />
</td>
<td data-bind='text: percent'></td>
</tr>
</table>
如果您绝对需要使用普通对象,您可以percent
在父模型上定义 ' 逻辑并传递对视图中当前项目的引用以动态创建计算。(我不会推荐这个)
var UserModel = function () {
this.users = ko.observableArray([
{
id: 1,
name: ko.observable('Bob'),
marks: ko.observable(0)
},
{
id: 2,
name: ko.observable('Jane'),
marks: ko.observable(0)
}
]);
this.selectedUser = ko.observable(this.users()[0])
};
UserModel.prototype.percentageFor = function(user) {
return user.marks() + "%";
};
var userModel = new UserModel();
ko.applyBindings(userModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table data-bind="foreach: users()">
<thead class="flip-content table-head">
<tr>
<th align="center">Name</th>
<th align="center">Marks</th>
<th align="center">% out of 100</th>
</tr>
</thead>
<tr >
<td data-bind="text: name"> </td>
<td>
<input data-bind="value: marks" />
</td>
<td data-bind='text: $parent.percentageFor($data)'></td>
</tr>
</table>
推荐阅读
- sql - 如果我的 SQL Server 表中有重复值,我该如何更新?
- arduino - 当我上传 graghicstest 时,WeMos D1 R1 显示“通过 RTS pin 硬重置...”
- vba - 访问数据宏的新功能
- powershell - 调用表达式的替代方案
- css - CSS颜色是如何动画的
- python - 以编程方式从 Swagger 定义生成客户端
- mysql - 如果表 2 中的日期值在表 1 中找到的日期范围内,则从表 2 中获取日期值或不可用
- c# - 使用正则表达式根据出现的不同字符拆分字符串
- c++ - 写入 Excel 文件的错误 - C++
- ruby-on-rails - 如何在 Rails 视图中显示中央标准时间 (CST)?