CODEWITHSUNDEEP
javascriptknockout.js
Micaël Félix
Micaël Félix

Reputation: 2775

Update Knockout-based Form from javascript object

Is it possible to use Knockout ONLY for viewing/using other objects of custom class? I'm trying to find a way to open knockout with different data but always the same structure.

What I did:

// I have an Event class which looks like that:
function cEvent(id){
    this.id = id;
}
// I keep an array of instances of that class in something like:
var arr = [new cEvent(1), new cEvent(2)]

On the html page I have:

Event ID: <span data-bind="text: id"></span>

I created an accessor-like class to get data from a specific event with Knockout

   cEvent2 = function cEvent2(baseEvent) {
        this.id = ko.computed(function(){
            return baseEvent.id;
        });
    }

When I use ko.applyBindings(arr[0]); it works but what if I want to load another "model" without cleaning nodes and reapplying knockout on the page?

What I want:

I'd like to have something like ko.applyBindings(arr[1]); that would update the interface based on the data I want.

Of course in reality the cEvent class is much more complex, but I am trying to see if we're able to get something done without directly extending these instances of cEvent with knockout.

Maybe I'm just trying to do something wrong and it's not the way knockout want to work? I know that in my case I want knockout to serve as a "simple class reader" even if it could do more.

Any tip would be really appreciated.

Upvotes: 0

Views: 33

Answers (1)

DoctorMick
DoctorMick

Reputation: 6793

Here's what I would do:

function cEvent(id){
    this.id = id;
}

function myViewModel() {
    var arr = [new cEvent(1), new cEvent(2)]

    this.selectedEvent = ko.observable(arr[0]);
}

ko.applyBindings(new myViewModel());

That way, if you bind to selectedEvent.id all you need to do when you want to view a different event is update the selectedEvent property and all of your bindings will be automatically updated.

Upvotes: 2

Related Questions