Problem bei Wertzuweisung in KnockoutJS

[dyingangel]

Hi Leute,

ich arbeite mich momentan in KnockoutJS ein und habe ein kleines Problem, dem ich nicht auf die Schliche komme. Bei meinen Entry Objekten weist er die observable-Values nicht richtig zu. Wenn ich mir die Objekte in der Konsole ausgeben lasse, bekomme ich für "name, isDone und selected" nicht den Wert ins Objekt geschrieben, stattdessen weist schreibt er irgendwelche Funktionsparameter rein. Normalerweise macht das KnockoutJS immer dann, wenn ein observable-Value ohne () aufgerufen wird. Weiss einer wo das Problem liegt?

Hier mein JS Code der ModelView:

var cnt = 0;    //Global counter variable for object id

//Entry Ctor
function Entry(data)
{
    //Increment the cnt var for unique entry id
    function incrementCnt() {
        return cnt++;
    }

    this.id = incrementCnt();
    this.name = ko.observable(data.name);
    this.isDone = ko.observable(data.isDone);
    this.selected = ko.observable(data.selected);

    var currentdate = new Date();
    this.dateAdded = currentdate.getDate() + "." + (currentdate.getMonth()+1)  + "." + currentdate.getFullYear() + " | " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
}

//ViewModel Ctor
function ToDoListViewModel()
{
    this.newEntryName = ko.observable("");
    this.entrys = ko.observableArray([
        new Entry({name: "Generate dynamic ToDo-List with KnockoutJS", isDone: false, selected: false }),
        new Entry({name: "Generate dynamic ToDo-List with KnockoutJS", isDone: false, selected: false }),
        new Entry({name: "Generate dynamic ToDo-List with KnockoutJS", isDone: false, selected: false }),
        new Entry({name: "Generate dynamic ToDo-List with KnockoutJS", isDone: false, selected: false })
    ]);
    this.selectedEntrys = ko.observableArray([]);
};

/**
 * This method ...
 * @param para {para} A parameter
 */

//Add new entry object to the entry array
ToDoListViewModel.prototype.addEntry = function()
{
    if(this.entrys.push(new Entry({name: this.newEntryName(), isDone: false, selected: false})));
        console.log("Entry successfully created");

    this.newEntryName("");
};

//Select entrys and add them to the selectedEntrys array
ToDoListViewModel.prototype.selectEntry = function(entry)
{
    if(entry.selected())
    {
        this.selectedEntrys.push(entry);
        console.log("Entry " + entry['id'] +  " selected");
    }
    else
    {
        this.selectedEntrys.remove(entry);
        console.log("Entry " + entry['id'] + " unselected");
    }

    var outputString = "";
    for(var i=0; i < this.selectedEntrys().length; i++)
        (i == this.selectedEntrys().length-1) ? (outputString += this.selectedEntrys()[i]['id']) : (outputString += this.selectedEntrys()[i]['id'] + " | ");

    console.log("Anzahl: " + this.selectedEntrys().length + " | Selected entrys (id): " + outputString);
    return true;
};

//Remove an single entry
ToDoListViewModel.prototype.removeEntry = function(entry)
{
    var id = entry['id'];
    this.entrys.destroy(entry);
    console.log("Entry " + id + " successfully deleted");
};

//Remove multiple entrys which are selected and available in the seletedEntrys array
ToDoListViewModel.prototype.removeSelectedEntrys = function()
{
    for(var i=0; i < this.entrys().length; i++)
        console.log(this.entrys()[i]);
};

//Removes all entrys from the list
ToDoListViewModel.prototype.clearList = function()
{
    var cntItems = this.entrys().length;
    if(this.entrys([]))
        console.log(cntItems + " entrys successfully removed");
};

Und hier der HTML Code der View:

<div class="contentbox">

        <form data-bind="submit: addEntry">
            <button type="submit" data-bind="enable: newEntryName().length > 0">Add</button>
            <button data-bind="click: removeSelectedEntrys, enable: selectedEntrys().length > 0">Remove Selected Entrys</button>
            <button data-bind="click: clearList, enable: entrys().length > 0">Clear List</button>
            <span></span><br/>
            <input placeholder="What's to do?" type="text" data-bind='value: newEntryName, valueUpdate: "afterkeydown"' />
        </form>

        <div class="todolist-outer" data-bind="visible: entrys().length > 0">
            <div class="todolist-inner" data-bind="foreach: entrys">
                <div class="entry-row" data-bind="style: { background: isDone() ? '#78d683' : '#fff', border: isDone() ? '1px solid #689a6e' : '0' }">
                    <input class="entry-select" type="checkbox" data-bind="checked: selected, click: $root.selectEntry.bind($root)" />
                    <input type="text" data-bind="value: name, disable: isDone, style: { background: isDone() ? '#dddddd' : '#fff' }" />
                    <span class="entry-date" data-bind="text: dateAdded"></span>
                    <a class="entry-remove" href="#" data-bind="click: $root.removeEntry.bind($root)"></a>
                    <input data-bind="checked: isDone" class="entry-isDone" type="checkbox"/>
                </div>
            </div>
        </div>

    </div>

Wenn ich die Objekte von entrys in der Konsole ausgeben lasse, sieht das allerdings so aus. Anstatt der Werte schreibt er immer das hier rein:

function c(){if(0<arguments.length)return c.Ka(d,arguments[0])&&(c.P(),d=arguments[0],c.O()),this;a.k.zb(c);return d}

Entry {id: 0, name: function, isDone: function, selected: function, dateAdded: "8.3.2014 | 21:59:22"}
Entry {id: 1, name: function, isDone: function, selected: function, dateAdded: "8.3.2014 | 21:59:22"}
Entry {id: 2, name: function, isDone: function, selected: function, dateAdded: "8.3.2014 | 21:59:22"}
Entry {id: 3, name: function, isDone: function, selected: function, dateAdded: "8.3.2014 | 21:59:22"}

Danke schonmal im Vorraus!

 

[dyingangel]

Ok ich war wohl wieder einfach zu voreilig. Scheinbar weiss die Konsole nicht wie sie die observable Werte unwrappen soll. Wenn ich die Werte direkt anspreche funzt alles. Also in den Objekten selbst scheint doch alles zu stimmen