Bind knockoutjs to javascript object property

Question

I'm new to Knockoutjs, so please bear with me.

I want to knocoutjs bind a DxForm (DevExpress) to an javascript object property, but I get an error ... "Cannot read property 'items' of undefined".

I am uncertain if this is a knockout problem, DevExpress problem or just incufficient coding skills from my part.

Here's my code...

HTML:

<div data-bind="dxForm: frm.options"></div>

Javascript:

var viewModel = function() {
    var that = this;

    // -----------------------------------------------------------------
    // Faste...
    // -----------------------------------------------------------------
    that.frm = {
       items: ko.observable(undefined),
       data: ko.observable(undefined),
       instance: ko.observable({}),
       options: {
          items: that.frm.items,
          formData: that.frm.data,
          onInitialized: function(e) {
             that.frm.instance(e.component);
          },
       },
    };

    return {
       frm: that.frm,
    };

 };

 var vm = new viewModel();
 ko.applyBindings(vm);

 var items = [{
    "dataField": "test",
    "editorOptions": {
       "type": "date",
       "pickerType": "calendar",
    },
    "editorType": "dxDateBox",
    "name": "Test",
    "visible": true
 }];

 var data = {
    test: 10,
 };

 vm.frm.data(data);
 vm.frm.items(items);

JSFiddle: https://jsfiddle.net/MojoDK/ke395v2c/3/

I want to bind to objects since I'm going to use several DxForm objects and I like to keep the code to each DxForm in an object (easier to read).

Any idea why it fails?

Thanks.

OrcusZ · Accepted Answer · 2017-05-30 10:22:21Z

2

You just have a problem with closure in your frm.

The that property in frm object do not exist you should use this...

But in your onInitialized function, this and that will not target your viewModel object...

So this way, the easiest is to declare options object later :

 that.frm = {
       items: ko.observable(undefined),
       data: ko.observable(undefined),
       instance: ko.observable({})
    };

         that.frm.options = {
          items: that.frm.items,
          formData: that.frm.data,
          onInitialized: function(e) {
             that.frm.instance(e.component);
          },
       };

Updated jsfiddle

answered May 30, 2017 at 10:22

OrcusZ

3,6822 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MojoDK Over a year ago

Oh ... ok ... I see. Thank you for helping me out here! I will use your solution.

Collectives™ on Stack Overflow

Bind knockoutjs to javascript object property

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related