Knockout observableArray项属性更改没有't更新UI
Knockout observableArray item property change doesn't update UI
当我将属性更改为observableArray
时,它不会更新UI
请参阅下面和jsFiddle中的示例。
点击标题应更新sorting
属性并显示/隐藏适当的span
Javascript:
var baseModel = [{
key: 'name',
type: 'string'
}, {
key: 'surname',
type: 'string'
}, {
key: 'age',
type: 'integer'
}]
var data = [{
name: "John",
surname: "Smith",
age: 12
}, {
name: "Peter",
surname: "Klark",
age: 3
}, {
name: "Steve",
surname: "Heisenberg",
age: 43
}]
var vm = function () {
var counter = 1;
var people = ko.observableArray(data);
var keys = ko.observableArray([]);
var init = function () {
var tempArray = [];
_.each(baseModel, function (item, key) {
tempArray.push({
key: item.key,
type: item.type,
sorting: false,
direction: "asc"
});
});
// Set first column to sort by default
tempArray[0].sorting = true;
// Add
keys(tempArray);
};
var peopleList = ko.computed(function () {
return people.sort(function (l, r) {
var sortKey = _.where(keys(), {
sorting: true
}) || keys()[0];
var result;
if (typeof sortKey !== "undefined" && sortKey.length > 0) {
result = (sortKey[0].direction === 'asc') ?
l[sortKey[0].key] > r[sortKey[0].key] ? 1 : -1 :
l[sortKey[0].key] < r[sortKey[0].key] ? 1 : -1;
} else {
result = l[0] > r[0] ? 1 : -1;
}
return result;
});
});
var addKey = function () {
keys.push({
key: "New Key No " + (counter++),
type: 'string',
sorting: false,
direction: 'asc'
});
}
var sortColumn = function (v) {
if(v.sorting === true){
v.direction = (v.direction === 'asc') ? 'desc' : 'asc';
} else {
_.each(keys(),function(item,key){
keys()[key].sorting = false;
})
keys()[keys().indexOf(v)].sorting = true;
}
keys.valueHasMutated();
}
init();
return {
people: people,
keys: keys,
addKey: addKey,
peopleList: peopleList,
sort: sortColumn
}
}
ko.applyBindings(new vm());
HTML:
<table>
<thead>
<tr data-bind="foreach: keys">
<td data-bind="click: $root.sort">
<span data-bind="text: $data.key"></span>
<span data-bind="visible: $data.sorting, text: 'sorting'"></span>
</td>
</tr>
</thead>
<tbody data-bind="foreach: peopleList">
<tr data-bind="foreach: $root.keys">
<td data-bind="text: $parent[$data.key] || 'no data'">1</td>
</tr>
</tbody>
</table>
<button data-bind="click: addKey">Add new key</button>
您可以将排序属性设置为可观察的:
tempArray.push({
key: item.key,
type: item.type,
sorting: ko.observable(false),
direction: "asc"
});
我根据你的小提琴进行了修改:http://jsfiddle.net/4LDZH/
相关文章:
- 如何在范围值更改时使用 angularJs 更新 UI
- 在日期更改后更新Angular UI引导程序日期选择器选项
- 只有当alert()在带有AJAX的internet explorer中使用时,Javascript才会更新UI
- UI网格AngularJS-如何更新UI网格中的列标题
- UI中未更新Knockout ObservableArray
- JQuery UI 对话框在第二次单击时不会更新
- jQuery UI 滑块动画未更新 UI vValue
- Angular/UI路由器-如何在不刷新所有内容的情况下更新URL
- 从jQuery UI滑块更改为'noUiSlider'-用于更新动画进度滑块的函数
- 保持我的 UI 更新,而不会因请求而终止服务器
- JavaScript 函数和 UI 更新
- 为什么 JavaScript 在这里阻止 UI 更新(通过 jquery)
- 在jquery UI更新上设置对象属性
- Kendo UI更新和创建不起作用
- 如何延迟.live()直到UI更新
- 如何在浏览器中强制UI更新,而冗长的javascript计算正在进行中
- Material-UI:更新库后代码不工作
- Jquery美元.when阻塞代码执行和UI更新
- 如何在循环中使用jQuery UI更新变量
- 优化定期 UI 更新