CODEWITHSUNDEEP
knockout.js
Diego Vieira
Diego Vieira

Reputation: 1150

Using Knockout-Kendo doesn't update value on item on observableArray

I'm not sure what's wrong here, but we're using the DatePicker from http://rniemeyer.github.com/knockout-kendo/web/DatePicker.html and when we send the item back to the array, the field does not get updated. As you'll be able to see on the test below, the date we choose, doesn't get updated on the item when we send it back. Any help is much appreciated. Thank you

Demo Test http://s7.postimage.org/68n30bd6z/knockoutjs_knockout_kendo.gif

jsFiddle http://jsfiddle.net/DiegoVieira/epqUb/4/

JS

var data =
[
    {
        "name": "Diego",
        "birthday": "01/01/1984"
    },
    {
        "name": "Franciele",
        "birthday": "01/05/1983"
    }
];

var person = function() {
    this.id = ko.observable(0);
    this.name = ko.observable();
    this.birthday = ko.observable();
}

function viewModel() {
    var self = this;
    self.people = ko.observableArray(data);
    self.personData = ko.observable(new person());
    self.selectedPerson = ko.observable();

    self.addPerson = function() {
        var item = ko.toJS(new person());
        item.id = getRandomNumber();
        self.people.push(item);
        self.selectedPerson(item);
    }

    self.editPerson = function(item)
    {
        self.selectedPerson(item);
    }

    self.savePerson = function(item)
    {
        var index = self.people.indexOf(item);
        self.people.remove(item);
        self.people.splice(index, 0, item);
        self.selectedPerson(null);
    }

    self.deletePerson = function(item)
    {
        var index = self.people.indexOf(item);
        self.people.remove(item);
    }
}
ko.applyBindings(new viewModel());




function getRandomNumber(min, max) {
    if (typeof min === 'undefined')
        min = 10000000;
    if (typeof max === 'undefined')
        max = 99999999;
    return min + Math.floor(Math.random() * (max - min + 1));
}

HTML

<div data-bind="with: $root.selectedPerson">
    <table border="1" cellpadding="1" cellspacing="1">
        <tr>
            <td>Name:</td>
            <td><input data-bind="value: name" /></td>
        </tr>
        <tr>
            <td>Birthday:</td>
            <td><input data-bind="kendoDatePicker: birthday" /></td>
        </tr>
        <tr>
            <td colspan="2"><button data-bind="click: $root.savePerson">Save</button></td>
        </tr>
    </table>
</div>

<button data-bind="click: $root.addPerson">Add Person</button>
<ul data-bind="foreach: $root.people">
    <li><span data-bind="html: name"></span> (<span data-bind="html: birthday"></span>) <button data-bind="click: $root.editPerson">Edit</button> <button data-bind="click: $root.deletePerson">Delete</button></li>
</ul>

Upvotes: 0

Views: 1508

Answers (2)

NaveenKumar1410
NaveenKumar1410

Reputation: 1613

Hello, I found the issue,

Change the code like below ,it will work perfect.

    <tr>
        <td>Birthday:</td>
        <td><input data-bind="kendoDatePicker: birthday,value: birthday" /></td>
    </tr>

Please Mark It as Answer

Upvotes: 1

RP Niemeyer
RP Niemeyer

Reputation: 114792

The kendoDatePicker binding expects the property that it is writing against to be observable. With your current structure, you can make this work without too many changes.

One choice would be to maintain both the selected item and a copy (with observables) for editing. So, you would have something like selectedItem and originalItem.

You could update your Person constructor to allow it to pass data in like:

var Person = function(data) {
    data = data || {};
    this.id = ko.observable(data.id || 0);
    this.name = ko.observable(data.name);
    this.birthday = ko.observable(data.birthday);
};

When an item is selected:

self.editPerson = function(item) {
    self.original(item);
    self.selectedPerson(new person(item));
};

Then, when an item is accepted you could continue to use your same logic to replace the original item with the edited copy.

Here is an updated fiddle: http://jsfiddle.net/rniemeyer/h4tsd/

I have a slight alternative to this pattern in a blog post here: http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html

Upvotes: 1

Related Questions