由于某种原因,我无法将对象传递给可观察数组.
function Calendarviewmodel() { var self = this; self.event = { name : ko.observable(""),adress : ko.observable(""),startTime : ko.observable(""),endTime : ko.observable("") } self.events = ko.observableArray([ ]) self.addEvent = function (event) { self.events.push(event); alert(self.events.length) alert(self.events[0].name()); }
我的看法：
<fieldset class="add-event-fieldset">
<div data-bind="with: event">
<legend>Add Event</legend>
<div style="text-align: center;">
<label class="title-label">What </label>
</div>
<div>
<label>Name: </label>
<input type="text" name="whatTxtBox" data-bind="value: name" />
</div>
<div>
<label>Where: </label>
<input type="text" name="whereTxtBox" data-bind="value: adress" />
</div>
<div style="text-align: center;">
<label class="title-label">When </label>
</div>
<div>
<label>start: </label>
<input type="text" id="startHourTxtBox" data-bind="value: startTime" />
</div>
<div>
<label>end: </label>
<input type="text" id="endHourTxtBox" data-bind="value: endTime" />
</div>
</div>
<input type="hidden" name="" id="hiddenDay" />
<button id="btnAddNewEvent" data-bind="click: $root.addEvent">+</button>
</fieldset>
警报显示数组总是空的,请解释我做错了谢谢.
解决方法
您的可观察数组用法,例如self.events.push(event);是正确的(因为
observable array实现推送),只有你的警报是错误的.
正确的电话会是
alert(self.events().length) alert(self.events()[0].name());
因为您需要将observable数组作为函数调用,就像常规ko.observable一样,以获取其基础值数组本身.
但是,您当前正在将整个Calendarviewmodel添加到数组中,因为btnAddNewEvent不在您的绑定范围内,因此当前上下文将是您的主视图模型.
解决它的一种方法：只需将self.event添加到数组中,所以：
self.addEvent = function()
{
self.events.push(self.event);
alert(self.events().length)
alert(self.events()[0].name());
}
但是,当您想要添加另一个元素时,这会导致问题,因为您最终会引用相同的元素,因此正确的解决方案是将属性复制到某处：
所以我会为你的事件类创建一个构造函数：
var Event = function(data) {
var self = this;
self.name = ko.observable(data.name()),self.adress = ko.observable(data.adress()),self.startTime = ko.observable(data.startTime()),self.endTime = ko.observable(data.endTime())
}
并在addEvent中推送一个新事件
self.events.push(new Event(self.event));
