CODEWITHSUNDEEP
knockout.jskendo-ui
Mdb
Mdb

Reputation: 8556

Kendo-Knockout: nested bindings does not work using prevent bindings

I am using RPNiemeyer`s kendo-knockout library. I have two nested bindings. I am using the preventBindings technique from here:

http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

I am applying bindings on the parent div and then prevent bindings on the nested div. When I click the row in the grid I expect the second bindings to be triggered and pop up to be opened but nothing happends. The example code is similar to the code in : Kendo-Knockout: widget observable is not filled with the actual widget

Only html is different (languageDetails div is nested into languageList div): 

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

                ], 
            scrollable: false, sortable: true, pageable: false }, preventBinding: true"
    style="height: 380px"></div>
    <div data-bind="preventBinding: true">
      <div data-viewid="languageDetails">
        <div id="languageDetails" data-bind="with: viewModel" class="hidden">
          <form id="languageDetailsForm" action="" style="font-family: Trebuchet MS, Verdana, Helvetica, Sans-Serif;">
              <div data-bind="kendoWindow: {isOpen: isOpen, title:'Language', width: 400, height: 200, modal: true, widget: popUpWindow }">test
                  <button id="cancelLanguage" class="k-button" data-bind="click: cancelLanguage">Cancel</button>
              </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

When I debug the code in my application when the bindings are applied on the languageList div and I click on the row to open the pop up the second bindings are not applied and the execution does not go into the function:

if (!elementIsBoundNew(element)) {
      var parentViewModel = {
        viewModel: viewModel
      };

Which maybe means that the first apply bindings has been applied on the two nested divs and the second prevent bindings has not worked. This is only my suggestion.

Here is the fiddle:

http://jsfiddle.net/PVMjy/4/

Any help will be greatly appreciated. Thanks!

Update per RP Niemeyer's comment:

Your solution works for the sample i gave in fiddle, but does not work for my application. In my real scenario I use the selectedLanguage from the grid to find a language viewmodel from a list of existing viewmodels and assign it to selectedLanguageViewModel observable. In other words selectedLanguageViewModel is never empty. This is the code from my real application:

LanguageListViewModel.prototype.onLanguageSelected = function (selectedLanguage) {
            var languageViewModel = getLanguageViewModel(selectedLanguage);
            self.selectedLanguageViewModel(languageViewModel);
            utils.applyBindings(self.selectedLanguageViewModel, languageDetailsElement);
            self.selectedLanguageViewModel().openPopUp(false);
            //createTreeView();
        };

What I did here to make it work is save the div`s elementids I bound to in an array. Then, when I have to apply bindings, I check to see if the element is in the array and it if it is not then I apply bindings:

var applyedBindingsElements = [];

  var applyBindings = function (viewModel, elementId) {
    if($.inArray(elementId, applyedBindingsElements) == -1)
    {
      var element = $('div[data-viewId="' + elementId + '"]')[0];
      var parentViewModel = { viewModel: viewModel };
      ko.applyBindings(parentViewModel, element);

      applyedBindingsElements.push(elementId);
    }
  };

My future plans are to use languageList as a separate component that can appear several times on a same page. Then, this solution will not work as the div elementIds I bind the two components to, will have the same name ("languageList"). So I will have to think of some other solution then. But this is a topic of another question I will ask in the near future and will be gratefull to have your feedback on it. Thanks!

Working fiddle with my solution on this topic:

http://jsfiddle.net/PVMjy/6/

Upvotes: 0

Views: 741

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

The issue is that ko.dataFor searches up the DOM to find its value. So, it actually goes outside the area that had bindings skipped and finds the overall view model. So, your guard for whether bindings have already been applied is hit when trying to open the popup.

I made some minor changes to get rid of the bindings check and just apply bindings to the popup area the first time that the button is clicked.

Basically just this code after removing the already bound check:

self.onLanguageSelected = function (selectedLanguage) {
  if (!self.selectedLanguageViewModel()) {
      applyBindings(self.selectedLanguageViewModel, "languageDetails");
  }

  self.selectedLanguageViewModel(self.languageViewModels()[0]);
  self.selectedLanguageViewModel().openPopUp();
};

Sample: http://jsfiddle.net/rniemeyer/8hzzn/

Does this work for you?

Upvotes: 1

Related Questions