使用敲除將對象添加到可觀察陣列

由於某些原因，我無法將對象傳遞給可觀察數組。使用敲除將對象添加到可觀察陣列

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>

警報表明陣列始終是空的，請解釋一下我做錯了感謝。

來源

2013-04-27 Alan Budzinski

您的可觀察陣列用法例如self.events.push(event);是正確的（因爲observable array implements 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));

來源

2013-04-27 20:08:18 nemesv

這是工作，但似乎當我使用alert（self.events（）[0] 。名稱（））;我得到這個錯誤：未捕獲TypeError：對象＃沒有方法'名稱'，當我輸入alert（self.events（）[0] .event.name（））然後它的好，但並不意味着我存儲我的數組中的整個視圖模型，而不僅僅是視圖模型的事件屬性。我想讓數組保留jsut事件對象，而不是它自己的視圖模型。 – 2013-04-27 20:13:48

是的，您目前正在將整個日曆viewmodel添加到數組中，因爲'btnAddNewEvent'在'with'綁定之外，所以當前上下文將是您的主視圖模型。解決它的一種方法就是添加'self.event'，這樣'self.addEvent = function（）{self。events.push（self.event）; alert（self.events（）。length） alert（self.events（）[0] .name（））;' – nemesv 2013-04-27 20:18:49

sweet，按預期工作 – 2013-04-27 20:22:55

嘗試

self.events().length

和

self.events()[0].name()

代替。

來源

2013-04-27 20:09:30 NilsH

只是更新一點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());

現在

來源

2013-10-02 10:23:55 naveen

使用敲除將對象添加到可觀察陣列

回答

相關問題