Javascript 使用敲除将对象添加到可观察数组

由于某种原因，我无法将对象传递到可观察阵列

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）

是正确的（因为实现了

推送

），只有您的警报是错误的

正确的电话是

alert(self.events().length)
alert(self.events()[0].name());

因为您需要像常规的

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));

试一试

及

相反。
只是更新一下内梅塞夫的答案。您真的不必将
数据
作为参数传递

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

现在它可以工作了，但当我使用alert（self.events（）[0].name（））时，它似乎可以工作；我得到了这个错误：Uncaught TypeError:Object#没有方法“name”，当我键入警报（self.events（）[0].event.name（））时，它是ok的，但这不意味着我将整个视图模型存储在数组中，而不仅仅是视图模型的event属性。我希望数组保存jsut事件对象，而不是视图模型本身。是的，您当前正在将整个日历视图模型添加到数组中，因为
btnAddNewEvent
不在带
绑定的
范围内，因此当前上下文将是您的主视图模型。解决此问题的一种方法是添加
self.event
so
self.addEvent=function（）{self.events.push（self.event）；alert（self.events（）.length）alert（self.events（）[0].name（））；
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());