使用knockout将对象添加到可观察数组

时间:2013-04-27 20:04:01

标签: javascript knockout.js ko.observablearray

出于某种原因,我无法将对象传递给可观察数组。

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>

警报显示数组总是空的,请解释我做错了谢谢。

3 个答案:

答案 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());