Question

I am using custom bindings that control descendant bindings. Here is my code:

HTML:

<div>
 <div data-bind="withProperties: languagesInfoViewModel()">

          <div id="languageListGrid" data-bind="kendoGrid: { data: languageViewModels, columns: [ 
                    { 
                        template: '<a href=\'\' data-bind=\'click: function() { $parent.onLanguageSelected(&quot;#=Language#&quot;) }\'>#=Language#</a>', 
                        field: 'Language', 
                        title: 'Language',
                        width: 50
                    }

                    ], 
                scrollable: false, sortable: true, pageable: false }, preventBinding: true"
        style="height: 380px"></div>


        <button data-bind="click: showLanguageDetails">Show Language Details</button>
    <div class="hidden" data-bind="withProperties: selectedLanguageViewModel()">
              <form id="languageDetailsForm" action=" ">

                  <div data-bind="kendoWindow: {isOpen: isOpenPopUp, title:'Language', width: 400, height: 200, modal: true }">
                            test
                            <button id="cancelLanguage" class="k-button" data-bind="click: cancelLanguage">Cancel</button>
                  </div>
              </form>
    </div>
 </div>

Javascript:

$(function () {
ko.bindingHandlers.preventBinding = {
    init: function () {
        return {
            controlsDescendantBindings: true
        };
    }
};

ko.bindingHandlers.withProperties = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var childViewModel = valueAccessor();

        childViewModel.isOpen.subscribe(function (isOpen) {
            if (isOpen) {
                var innerBindingContext = bindingContext.extend(childViewModel);
                ko.applyBindingsToDescendants(innerBindingContext, element);
            };
        });

        return { controlsDescendantBindings: true };
    }
};

ko.bindingHandlers.kendoGrid.options.dataBound = function (data) {
    var body = this.element.find("tbody")[0];

    if (body) {
        ko.applyBindings(ko.dataFor(body), body);
    }
};

var FranchiseInitializer = function () {

    var self = this;

    var initialize = function () {
        var franchiseDetailsViewModel = new FranchiseDetailsViewModel();
        ko.applyBindings(franchiseDetailsViewModel);
        franchiseDetailsViewModel.open();
    };

    initialize();
};

var FranchiseDetailsViewModel = function () {

    var self = this;

    var initialize = function () {
        self.languagesInfoViewModel(new LanguageListViewModel(self));
    };

    self.languagesInfoViewModel = ko.observable();

    self.open = function () {
        self.isOpen(true);
        self.languagesInfoViewModel().open();
    };
    self.isOpen = ko.observable(false);


    initialize();
};

var LanguageListViewModel = function (franchise) {

    var self = this;

    var initialize = function () {
        var languageViewModel = new LanguageDetailsViewModel('English', franchise);
        self.languageViewModels.push(languageViewModel);
        var languageViewModel1 = new LanguageDetailsViewModel('Spanish', franchise);
        self.languageViewModels.push(languageViewModel1);
        self.selectedLanguageViewModel(languageViewModel);
    };

    self.languageViewModels = ko.observableArray([]);
    self.selectedLanguageViewModel = ko.observable();

    self.open = function () {
        self.isOpen(true);
    };
    self.isOpen = ko.observable(false);

    self.showLanguageDetails = function () {
        self.onLanguageSelected("English");
    };

    var getLanguageViewModel = function (language) {
        return self.languageViewModels().filter(
            function (element, index, array) {
                return (element.Language() == language);
            })[0];
    };

    self.onLanguageSelected = function (selectedLanguage) {
        var languageViewModel = getLanguageViewModel(selectedLanguage);
        self.selectedLanguageViewModel(languageViewModel);
        self.selectedLanguageViewModel().open();
    };

    initialize();
};

var LanguageDetailsViewModel = function (lang, franchise) {
    var self = this;

    var closePopUp = function () {
        self.isOpen(false);
        self.isOpenPopUp(false);
    };

    self.isOpenPopUp = ko.observable(false);
    self.Language = ko.observable(lang);

    self.open = function () {
        self.isOpen(true);
        self.isOpenPopUp(true);
    };
    self.isOpen = ko.observable(false);

    self.cancelLanguage = function () {
        closePopUp();
    };
};

var initialize = new FranchiseInitializer();

I have the following issue:

When I choose a language from the grid a onLanguageSelected function should be executed. But I am receiving an error 'onLanguageSelected' is undefined. I debug it and it seems that when clicking on the grid I am in the parent context that is FranchiseDetailsViewModel, not in the LanguageListViewModel. I am unable to say something like $child.onLanguageSelected in the template. How can I fix this?

Fiddle:

http://jsfiddle.net/2Qnv7/16/

And something strange: when you click on the Show language details button a pop up window should be open but only the animation shows and it freezes. The strange thing is that it works perfectly in my asp.net mvc 4 application. Any ideas about this?

Update:

I was able to do the job like this:

languagesInfoViewModel().onLanguageSelected("#=Language#")

But I do not like this code in my template very much. Maybe there is more flexible solution?

Answer 1

Based on the “dataBound” handler, the context for the whole grid is your FranchiseDetailsViewModel.

You would have to have to call it as your proposed like: languagesInfoViewModel().onLanguageSelected("#=Language#")

or you could consider trying to use the row-level KO templates that are now support in Knockout-Kendo.