Binding object in Knockout

Question

I have a problem with binding an (JSON-)object to my view.

I have the following object, which I get from my REST-service. enter image description here

Now I would like to bind this object to my view. I tried this:

var viewModel = {
    test: ko.mapping.fromJS(params.obj),

    ID: params.obj.ID,
    //Bezeichnung: ko.observable(params.obj.Bezeichnung),
    //MaxRunawayTime: ko.observable(params.obj.MaxRunawayTime),

    btnSaveClick: function (e) {
        debugger;
        //params.obj.Bezeichnung = viewModel.Bezeichnung();
        //params.obj.MaxRunawayTime = viewModel.MaxRunawayTime();

        Application1.db.update(params.obj).done(function (data) {
            Application1.app.back();
        });
    }
};

My dxView:

<div data-options="dxView : { name: 'TrackerEdit', title: 'TrackerEdit' } " >
<div data-options="dxContent : { targetPlaceholder: 'content' } " >
    ID_Tracker:<div data-bind="dxTextBox: {value: ID, disabled: true}"></div>
    Bezeichnung:<div data-bind="dxTextBox: {value: test.Bezeichnung}"></div>
    Max. Ausreisezeit:<div data-bind="dxNumberBox:{min:0, max:100, value:test.MaxRunawayTime, showSpinButtons: true}"></div>
    <!--Bezeichnung:<div data-bind="dxTextBox: {value: Bezeichnung}"></div>
    Max. Ausreisezeit:<div data-bind="dxNumberBox:{min:0, max:100, value:MaxRunawayTime, showSpinButtons: true}"></div>-->
    <div data-bind="dxButton: {text: 'Save', onClick: btnSaveClick}"></div>       
</div>

Please have a look at the commented code lines. In this way it would work. But I don't like to bind each variable separate and have to write it back to my original object. I would like to bind my original object directly.

I'm new to Knockout and any help would be great! Thank you very much.

score 0 · Accepted Answer · answered Mar 25 '15 at 09:07

Instead of writing properties one by one you can use ko.mapping plugin:

Just write something like that:

btnSaveClick: function (e) {
    debugger;
    var request = ko.mapping.toJS(viewModel.test);

    Application1.db.update(params.obj).done(function (data) {
        Application1.app.back();
    });
}

Binding object in Knockout

1 Answers1