Knockout.js dynamic binding of observables and observableArrays

[Jordan Papaleo]

I am trying to utilize knockout to create an editable table. I have a JSON object that has a collection of both headings and table data. This table needs to be built using any object. It will loop over the JSON object to create ko.observableArray and the ko.observables to populate it. I have been able to do that. My problem is that the ko.observables are not being data bound.

Here is a snippet of my JavaScript:

EditableTableVM.prototype.load = function() {
    this.headings = this.buildKO_ObservableArray(new Heading(), this.dataRepo.HEADINGS);
    this.listings = this.buildKO_ObservableArray(new Listing(), this.dataRepo.LISTINGS);
}

/*
 * Dynamically creates a ko.observableArray from a JS array
 * Params: JSClass - new instance of a class
 * Params: baseArray - array of objects to create the observable array
 * Returns: Observable arary of JS object with ko.observables
 */
EditableTableVM.prototype.buildKO_ObservableArray = function(JSClass, baseArray) {
    var newArray = ko.observableArray([]);

    for(var i = 0, j = baseArray.length; i < j; i++) {
        var baseObj = baseArray[i];

        //new class is the class with ko.observables properties
        var newClass = this.buildKO_Observable(JSClass, baseObj);
        newArray.push(newClass);
    }

    return newArray;
}

/*
 * Dynamically create ko.observable from properties in an object
 * Params: JSClass - new instance of a class
 * Params: jsObject - object to created observables with
 * Returns: JS object with ko.observables
 */
EditableTableVM.prototype.buildKO_Observable = function(JSClass, jsObj) {
    for (var key in jsObj) {
        if (jsObj.hasOwnProperty(key)) {
            JSClass[key] = ko.observable(jsObj[key]);
        }
    }

    return JSClass;
}

Here is my Fiddle http://jsfiddle.net/breck421/YFNLX/ with it working up to the point I described earlier.

I am not sure if what I am trying to do is possible or not and would really appreciate another set of eyes on this.

Thanks,

Jordan

[Michael Best]

It looks like you want to use something like http://coderenaissance.github.io/knockout.viewmodel/ 

EditableTableVM.prototype.load = function () {

    this.headings = ko.viewmodel.fromModel(this.dataRepo.HEADINGS);

    this.listings = ko.viewmodel.fromModel(this.dataRepo.LISTINGS);

}

http://jsfiddle.net/mbest/YFNLX/3/

-- Michael

[Ryan Rahlf]

Hi Jordon,

I saw this question on StackOverflow and answered it for you here : http://stackoverflow.com/questions/17097022/knockout-js-dynamic-binding-of-observables/17099971#17099971

I've also updated your fiddle http://jsfiddle.net/rrahlf/YFNLX/2/

Hope this helps!

-Ryan Rahlf

_____________________

http://RyanRahlf.com

@Ryanthem

[Jordan Papaleo]

Hi Ryan -

You are officially my new hero!  I truly appreciate you help with this.  Knockout is about a week old in my web tool box so I am still grasping the framework. 

Thank you again,

Jordan

On Thursday, June 13, 2013 6:55:48 PM UTC-7, Ryan Rahlf wrote:

Hi Jordan,

[Ryan Rahlf]

No problem Jordan!

You should definitely also take a look at Michael Best's answer.  There's been some discussion on this forum ( https://groups.google.com/forum/?fromgroups#!searchin/knockoutjs/maintain/knockoutjs/0cZAAVloRDw/XeDq62yQ768J ) about the future of the ko.mapping plugin and it's successor may well be knockout viewmodel plugin that Michael mentioned.  The guy kind of knows what he's talking about : https://github.com/knockout?tab=members  

I haven't worked with the knockout viewmodel plugin yet myself, but if you're just getting started with knockout you may want to be checking out the newest stuff.  Both plugins will address the issue you were having.

Since you're new to knockout, you may also want to check out my blog here : http://RyanRahlf.com .  I'm putting together a free "getting started" guide that should be out next week to everyone on my mailing list.  I hope to see you on it!

Good luck!

-Ryan Rahlf

___________________

http://RyanRahlf.com

@Ryanthem

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.