javascript 使用淘汰赛将对象添加到可观察数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16256364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add object to observable array using knockout
提问by Alan Budzinski
For some reason i'm having trouble passing an object to observable array.
出于某种原因，我无法将对象传递给可观察数组。
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());
}
my view:
我的观点：
<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>
The alerts show that the array is always empty, please explain what i'm doing wrong thanks.
警报显示数组始终为空，请解释我做错了什么，谢谢。
回答by nemesv
Your observable array usage e.g self.events.push(event);is correct (because observable arrayimplements push), only your alerts are wrong.
例如，您的 observable 数组使用self.events.push(event);是正确的（因为observable 数组实现了push），只有您的警报是错误的。
The correct calls would be
正确的调用是
alert(self.events().length)
alert(self.events()[0].name());
Because you need to call the observable array as a function like the regular ko.observableto get its underlying value the array itself.
因为您需要像常规函数一样调用 observable 数组，ko.observable以获取数组本身的底层值。
However you are currently adding to whole CalendarViewModelto the array because the btnAddNewEventis outside of yourwithbinding so the current context will be your main view model.
但是，您当前正在将整个添加到CalendarViewModel数组中，因为btnAddNewEvent它在您的with绑定之外，因此当前上下文将是您的主视图模型。
One way to solve it: just add the self.eventto the array, so:
解决它的一种方法：只需将self.event加到数组中，因此：
self.addEvent = function()
{
self.events.push(self.event);
alert(self.events().length)
alert(self.events()[0].name());
}
But this can cause problems later when you want to add another element because you will end up referencing the same element, so the right solution is copy the properties somewhere:
但这可能会导致稍后您想要添加另一个元素时出现问题，因为您最终将引用同一个元素，因此正确的解决方案是将属性复制到某处：
So I would create a constructor function for your event class:
所以我会为你的事件类创建一个构造函数：
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())
}
And push a new event in the addEvent
并在 addEvent 中推送一个新事件
self.events.push(new Event(self.event));
回答by NilsH
Try
尝试
self.events().length
and
和
self.events()[0].name()
instead.
反而。
回答by naveen
Just updating a little on nemesev answer. You really don't have to pass dataas an argument
只是更新了一点关于 nemesev 的答案。你真的不必data作为参数传递
var Event = function() {
var self = this;
self.name = ko.observable();
self.adress = ko.observable();
self.startTime = ko.observable();
self.endTime = ko.observable();
};
And call it like
并称之为
self.events.push(new Event());
