8

何らかの理由で、オブザーバブル配列にオブジェクトを渡すのに問題があります。

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>

アラートは、配列が常に空であることを示しています。私が間違っていることを説明してください。

4

3 に答える 3

13

たとえば、監視可能な配列の使用法self.events.push(event);は正しいです（監視可能な配列が実装されているためpush）、アラートのみが間違っています。

正しい呼び出しは

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

オブザーバブル配列を通常のような関数として呼び出してko.observable、配列自体の基になる値を取得する必要があるためです。

ただし、現在はバインディングの外側にあるCalendarViewModelため、配列に全体を追加しているため、現在のコンテキストがメイン ビュー モデルになります。btnAddNewEventwith

self.eventそれを解決する 1 つの方法:を配列に追加するだけです。

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-27T20:08:18.380 に答える
2

試す

self.events().length

と

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

代わりは。

于 2013-04-27T20:09:30.260 に答える
1

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-02T10:23:55.453 に答える