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 数据绑定对数组进行分组和读取:使用

更新 knockout.js 和 SignalR 库后,knockout-mapping js 不会更新视图中的列表

自定义绑定未触发更新

图像加载后在 Knockout.js 中淡入容器元素

Knockout Js:可观察数组的SORT函数如何工作