CODEWITHSUNDEEP
javascriptjqueryknockout.js
user2281858
user2281858

Reputation: 1997

Edit not working for newly added data - knockout

I have been following some tutorials and trying to follow knockout.js. I am not able to edit any data that is newly added.

My JS Code:

var data = [
new ListData("Programmer", 1),
new ListData("Testing", 2),
new ListData("DBA", 3),
new ListData("Lead", 4),
new ListData("Manager", 5)
];


function ListData(desig, id) {
    return {
        Desig: ko.observable(desig),
        Id: ko.observable(id)

    };
}
var viewModel = {
    list: ko.observableArray(data),
    dataToAdd: ko.observable(""),
    selectedData: ko.observable(null),

    addTag: function () {
        this.list.push({ Desig: this.dataToAdd() });
        this.tagToAdd("");
    },

    selecData: function () {
        viewModel.selectedData(this);
    }
};

$(document).on("click", ".editData", function () {
});

ko.applyBindings(viewModel);

My View Code:

    <input type="text" data-bind="value:   dataToAdd" />
    <button data-bind="click: addData">
        + Add
    </button>
    <ul data-bind="foreach: list">
        <li data-bind="click: $parent.selecData">
            <span data-bind="text: Desig"></span>
            <div>
                <a href="#" class="editData">Edit</a> 
            </div>
        </li>
    </ul>
<div id="EditData" data-bind="with: selectedData">
    Designation:
    <input type="text" data-bind="value: Desig" />
</div>

I am able to edit the data which already exists like - Programmer, Testing, DBA...but if I add a new data..I am not able to edit. Please assist.

Upvotes: 0

Views: 18

Answers (1)

Roy J
Roy J

Reputation: 43881

Your addData (you named it addTag in the code, but call addData in the HTML) function doesn't construct new elements the same way your initial data creation does. Note: since your ListData constructor explicitly returns an object, new is superfluous.

addData: function () {
    this.list.push(ListData(this.dataToAdd(), ""));
},

Upvotes: 1

Related Questions