knockout js 事件默认加载和数组更新方法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了knockout js 事件默认加载和数组更新方法相关的知识,希望对你有一定的参考价值。
参考技术A 1、前端使用knockoutJs框架,在foreach遍历中添加弹出框事件,如何对foreach出来的数据进行修改?试过其他几种方法,是可以更新数组中的数据,但是页面没有变化。也没有找到刷新数组可行的方法。不知道有没有更好的办法。
2、在 data-bind="click: $parent.sale" ,如果想传递参数的话, 那么进到页面默认就会加载一次,如果是循环的话,那么就会循环N次。如果想传参数,但是又不让事件默认加载的话,可以使用匿名的方法,如下:
Knockout JS 使用 JSON 迭代一个对象数组
【中文标题】Knockout JS 使用 JSON 迭代一个对象数组【英文标题】:Knockout JS Iterate a array of object using JSON 【发布时间】:2018-06-30 09:07:18 【问题描述】:以下是我的 JSON 响应。我需要使用敲除 foreach 来遍历这个数组并将这个数组显示为手风琴。在这种情况下,“Nissan”将是手风琴标题并单击它展开以显示其他详细信息。我找不到打印键(“Nissan”或“Ford”)并正确创建手风琴的方法。它将是一个动态数组,键会有所不同。我认为我需要嵌套的 foreach 并在迭代第二个时遇到问题。提前致谢。
var ViewModel = function()
var self = this;
this.entries =
"Nissan": [
"model":"Sentra", "doors":4,
"model":"Maxima", "doors":4
],
"Ford": [
"model":"Taurus", "doors":4,
"model":"Escort", "doors":4
]
;
<table>
<tbody data-bind="foreach: entries">
<tr>
<td data-bind="foreach: $parent.data()">
<a href="#" data-bind="text: model"></a>
</td>
</tr>
</tbody>
</table>
Fiddle
【问题讨论】:
【参考方案1】:JSON 数据使用一个对象将品牌映射到一系列模型,即“Nissan”-> [...]、“Ford”-> [...]。通常在处理这种数据时,我使用 ko.computed() 将对象映射转换为对象数组,通常会添加必要的函数和 observables。
我使用嵌套列表而不是表格发布了JSFiddle here。点击品牌可展开/折叠车型子列表。
<ul data-bind="foreach: entries">
<li>
<a href="javascript:void(0)" data-bind="text: brand, click: toggle"></a>
<ul data-bind="foreach: models, visible: visible">
<li data-bind="text: model"></li>
</ul>
</li>
</ul>
此外,在迭代对象的属性时不能保证顺序。在下面的代码中,对列表进行了排序以确保顺序一致。最佳实践也是使用 hasOwnProperty
检查属性是否在对象上,并且在将对象用作映射时没有从原型链继承。
还请注意,我将 JSON 响应粘贴到 observable 中,然后在计算后的 observable 中生成条目列表。这确保了如果设置了新的 JSON 数据,计算出的 observable 将自动更新。
var ViewModel = function()
var self = this;
self.cars = ko.observable(
"Nissan": [
"model": "Sentra",
"doors": 4
,
"model": "Maxima",
"doors": 4
],
"Ford": [
"model": "Taurus",
"doors": 4
,
"model": "Escort",
"doors": 4
]
);
self.entries = ko.computed(function()
var list = [],
entryVM,
data = self.cars();
for (var brand in data)
if (data.hasOwnProperty(brand))
entryVM = new EntryViewModel(brand, data[brand]);
list.push(entryVM);
return list.sort(function(a, b)
if (a.brand < b.brand)
return -1;
if (a.brand > b.brand)
return 1;
return 0;
);
);
;
为每个条目创建一个单独的视图模型EntryViewModel
,它封装了值和交互。在这种情况下,切换模型列表的可见性被封装在内部视图模型中,因此主视图模型不需要关注内部视图模型的状态。
var EntryViewModel = function(brand, models)
var self = this;
self.brand = brand;
self.models = models;
self.visible = ko.observable(false);
self.toggle = function()
self.visible(!self.visible());
;
【讨论】:
以上是关于knockout js 事件默认加载和数组更新方法的主要内容,如果未能解决你的问题,请参考以下文章
Knockout.js:当可观察数组中的值发生变化时触发计算的最佳方法是啥
如何使用 knockout.js 数据绑定对数组进行分组和读取:使用