出于某种原因,我无法将对象传递给可观察数组。
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>
警报显示数组总是空的,请解释我做错了谢谢。
答案 0 :(得分:12)
您的可观察数组使用情况(例如self.events.push(event);
)是正确的(因为observable array实现了push
),只有您的警报是错误的。
正确的来电是
alert(self.events().length)
alert(self.events()[0].name());
因为您需要将可观察数组作为常规ko.observable
之类的函数来调用,以使其基础值成为数组本身。
但是,您当前正在向整个CalendarViewModel
添加到数组,因为btnAddNewEvent
超出了您的with
绑定,因此当前上下文将成为您的主视图模型。
解决问题的一种方法:只需将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));
答案 1 :(得分:2)
尝试
self.events().length
和
self.events()[0].name()
代替。
答案 2 :(得分:0)
只需更新一下nemesev的答案。你真的不必将data
作为参数传递
var Event = function() {
var self = this;
self.name = ko.observable();
self.adress = ko.observable();
self.startTime = ko.observable();
self.endTime = ko.observable();
};
并称之为
self.events.push(new Event());