在 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>
如何在视图中显示 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>