1

I'm used to loading up partial views and user-controls from ASP.NET with some data when its requested. After seeing Knockout components, I tried to figure out how to do something similar with the documentation, but couldn't figure it out.

Can anyone help me with a quick example of how to do something simple like take a table full of data, and load up a Knockout component based on the row that was clicked?

<tbody data-bind="foreach: unapprovedNotes">
    <tr>
        <td><a href="#" data-bind="click: fetchNote(id())">Fetch this record</a></td>
    </tr>
</tbody>

<div id="note-preview-template">
    <client-information params="???"></client-information>
</div>

ko.components.register('client-information', {
    viewModel: function(params) {
        var self = this;

        self.someProperty = params.???
    },
    template: { element: 'note-preview-template' }
});

self.fetchNote = function(id) {
    //AJAX call that would load the data into <client-information>
}

So clicking the link would make an AJAX call to load up the component's data on demand. I don't need to load up the component at page load, but would like to reuse the component elsewhere in my application with similar behavior.

Is it even worth using components or should I just create a second viewmodel that has all the functionality wrapped in it?

dgarbacz
  • 962
  • 1
  • 7
  • 17

1 Answers1

0

just use Jquery's getJson (assuming your providing json to the client) Once you get the data in via that method apply it to your observable array...

good practice is to extract the underlying array of the observable and push the new values in one by one then mark the observable array as mutated

Once you have the Json from the server this post should help you with updating your observable array: Update Knockout.js Observable from JSON

Community
  • 1
  • 1
Michael Crook
  • 1,520
  • 2
  • 14
  • 37
  • I already know how to push the data into my viewmodel or array, I'm asking about taking it a step further and wrapping this functionality in a component so that the data is loaded on demand into a Knockout 3.2 component – dgarbacz Oct 09 '14 at 12:45
  • I don't really see how a component would add value... Maybe what your thinking about would be an extension? http://knockoutjs.com/documentation/extenders.html you could create a service which accepted in a json like schema of which you then attach the observables to the endpoints of this schema and then delegate work over to the service to retrieve data and put it into the VM automatically? you could simply make an extension which would look like: this.name= ko.observable(one).extend({ jsonExt: {jsonParam: 'people', mode: 'foreach'} }); – Michael Crook Oct 09 '14 at 20:56
  • this could do somthing like call out to a service and register your observable to be utilised whenever a call is made to update data, you could also subscribe to the observable via the extension to automatically post data on change. – Michael Crook Oct 09 '14 at 20:57