javascript - 在 KnockoutJS 的 View 中处理不存在的 observableArray 属性

Question

如何在 View 中显示 observableArray 的属性，而不会在该属性消失时出现 ReferenceError？

例如，我有以下observableArray:

this.arr({a:1, b:2, c: ['qwe', 'qweq'], d:4});

我试图在 View 中显示 c 的长度:

<div data-bind="with: arr()">
  <div data-bind="text: c.length"></div>
</div>

这适用于页面加载，但是当我清空数组时，我在控制台中收到 ReferenceError。

示例:http://jsfiddle.net/074pxwzt/

有没有办法在属性不存在的情况下忽略它？

Answer 1

如果属性不存在/为 null，with 绑定(bind)不会绑定(bind)其子项。

不过，我对为什么要将 observableArray 设置为一个对象感到困惑 — 看来您应该为此使用一个 observable，或者实际上将其用作一个数组。

observable 版本:

var ViewModel = function() {
  var self = this;

  this.arr = ko.observable();

  this.arr({
    a: 1,
    b: 2,
    c: ['qwe', 'qweq'],
    d: 4
  });

  this.kill = function() {
    self.arr(null);
  }

};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>

  <button data-bind="click: kill">Kill</button>

  <br>
  <br>

  <div data-bind="with: arr">
    <div data-bind="text: c.length"></div>
  </div>
</div>

带有 observableArray 的版本:

var ViewModel = function() {
  var self = this;

  this.arr = ko.observableArray([]);

  this.arr.push({
    a: 1,
    b: 2,
    c: ['qwe', 'qweq'],
    d: 4
  });

  this.kill = function() {
    self.arr.removeAll();
  }

};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>

  <button data-bind="click: kill">Kill</button>

  <br>
  <br>

  <div data-bind="foreach: arr">
    <div data-bind="text: c.length"></div>
  </div>
</div>