CODEWITHSUNDEEP
knockout.js
TugboatCaptain
TugboatCaptain

Reputation: 4328

Getting associated dom element from knockout's applyBindings() call in view model

I've got a view model that has various methods that do work over ajax. I want to use this library spin.js to show a spinner on the same element that the view model was applied to during the call to ko.applyBindings(). I don't see any Knockout.js method that allows retrieving the dom element while inside my view model and wondered if there is a way to get at it. I'm sure this borders or crosses over the purity of MVVM in some way so if there is another way to do this let me know.

I could pass the dom element as a parameter to my view model but then every view model I want to do this with now must track the element and that is redundant since Knockout is already tracking it.

// startup script

var _paymentMethodViewModel;
$(function () {
   _paymentMethodViewModel = new ViewModels.PaymentMethodViewModel("/Customer");
   ko.applyBindings(_paymentMethodViewModel, $("#PaymentMethodsList").get(0));
   // spinner should show up over the PaymentMethodsList dom element when this is called and when the ajax call is complete it should disappear
   _paymentMethodViewModel.getAllPaymentMethods();
});

// view model

self.getAllPaymentMethods = function () {
    // ******************
    // start spinner here
    // ******************
    var spinner = new Spinner(_spinnerOpts).spin(/* <need dom element here> */);

    $.ajax({
        url: self.rootUrl + "/GetAllPaymentMethods",
        type: "POST",
        data: {},
        context: self,
        success: function (result, textStatus, jqXHR) {
        },
        error: function (jqXHR, textStatus, errorThrown) {
        },
        complete: function (jqXHR, textStatus) {
            // ******************
            // stop spinner here
            // ******************
            spinner.stop();
        }
    });
}

Upvotes: 1

Views: 1749

Answers (1)

TugboatCaptain
TugboatCaptain

Reputation: 4328

Ok, I came up with a custom binding handler solution that I'm happy with.

http://jsfiddle.net/StrandedPirate/UbFZT/

Upvotes: 1

Related Questions