Search code examples
knockout.jsdotnetnuke

Data-Binding issue with KO.js on modal control

Hi guys I am looking for some help with this data-binding issue that I have with knockoutjs.

It all started when ko.applyBindings(viewModel) was throwing me an error on one page and not others saying something to do with multiple bindings being called on the same element.

Looking at documentation I quickly fixed this issue with ko.applyBindings(viewModel, document.getElementById('ElementId')) code.

But another problem problem has surfaced. I lost binding on edit control. In other words when I click on edit text I get a blank dialog box instead of filled one with object? properties.

Original source code - https://dnnboards.codeplex.com/
Original live demo - http://demo.dnnboards.com/

The only difference I can see is knockoutjs version. Original demo uses 2.1.0 and I am using 3.1.0 but regardless if I wrap entire demo html code in a div <body> <div id="myModule">...</div> <scripts> </body>
and change
ko.applyBindings(vm);
to
ko.applyBindings(vm, document.getElementById('myModule'));
everything still works as expected.

I couldn't get to work in jsfiddle but you should be able to get a better idea of what I was on about.
http://jsfiddle.net/iiminov/88rafcfk/

If anyone has a good suggestion of how to go about debugging this I'd much appreciate it.

But I am suspecting that
<div id="divModal" style="display:none;"> <!-- ko with: selectedCard -->
is not working correctly. Because
<!-- ko if: showAddCard --> <a href="#" class="hlCompose" data-bind="click: $root.expandCompose">Add a card</a>
displays Add a card link on every list.

Update 1:

Thanks to @PW Kad the issue with jsfiddle was resolved. But that wasn't my original question/problem I was trying to solve.

As I was trying to point out after adding scope to ko.applyBindings() I lost data-binding on dialog box but was able to solve an error with multiple bindings on the same element. Valid XHTML

Jsfiddles' purpose was to demonstrate that I shouldn't be having any issues. Yet I am struggling to figure out why that is the case.

However I made few observations:

  • knockout version difference (demo 2.1.0 vs my dev 3.1.0)
    • I don't know enough about knockout to rule this one out becuase jsfiddle still works fine even if I bump up knockout version to 3.0.0 (latest available).
  • I don't understand how data-binding works on the dialog box in the first place?
    • I understand self.selectedCard = ko.observable(); declaration
    • And I undestand self.selectedCard(cardToEdit); declaration
    • But according to documentation <p data-bind="with: coords">
    • Shouldn't I have something like <div id="divModal" style="display: none;" data-bind="with: selectedCard"> (this doesn't work for me btw)
  • The same principal applies to add a card link/button.
    • I don't see any binding with with keyword.
    • However in the original demo this link is only present on To Do list and in my case its present on all lists.

Valid XHTML

Update 1.1

Scratch the data binding bit with with keyword. I found Note 1: Using “with” without a container element which corresponds to what I am seeing in html. This is leading me to believe that not everything is ok in javascript somewhere. <!-- ko with: outboundFlight --> ... <!-- /ko -->

Update 1.2

Scratch out add a card link problem. Turns out my list items are coming back with SortOrder = 0 which causes the link to display on every list.

Update 1.3

Well, who would have guessed that by fixing the issue with SortOrder value which not only caused add a card link/button to be display on every list it also fixed the problem with data-binding on dialog box. Hrm...

Solution

  • Your fiddle was excellent in diagnosing the issue - http://jsfiddle.net/88rafcfk/1/ - there is an updated one.

    It appears your code was working fine except for a single change I made - you had document.GetElementById instead of document.getElementById.

    When I changed this everything worked fine.