在 KnockoutJS 的视图中处理不存在的 observableArray 属性

Handling non-existent observableArray properties in the view in KnockoutJS

如何在视图中显示 observableArray 的 属性 而不会在 属性 消失时出现 ReferenceError?

比如我有下面的observableArray:

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

我正在尝试在视图中显示 c 的长度:

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

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

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

有没有办法忽略 属性 以防它不存在?

如果 属性 不存在/为空,with 绑定不会绑定其子项。

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

版本 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>

这似乎适用于您的具体情况。但是,如果您使用此代码将数组设置为 null,则会出错。

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

  this.arr = ko.observableArray();

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

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

  this.swap = function() {
    self.arr({
      a: 1,
      b: 2,
      x: ['qwe', 'qweq', 'ijdj'],
      d: 4
    });
  }

};

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>
  <button data-bind="click: swap">Swap</button>
  <div data-bind="with: arr().c">
    <div data-bind="text: length"></div>
  </div>
  <div data-bind="with: arr().x">
    <div data-bind="text: length"></div>
  </div>
</div>