knockout-2.3.0.debug always throwing "You cannot apply bindings multiple times to the same element."

[ahmed...@just-eat.com]

Hello,

knockout-2.3.0.debug always throwing exception with multiple bindings check. Manged to worked round it it by changing the check from this:

if (!bindings) {
            if (alreadyBound) {
                throw Error("You cannot apply bindings multiple times to the same element.");
            }
            ko.utils.domData.set(node, boundElementDomDataKey, true);
        }

To:

 if (bindings != null) {
            if (alreadyBound) {
                throw Error("You cannot apply bindings multiple times to the same element.");
            }
            ko.utils.domData.set(node, boundElementDomDataKey, true);
        }

Which solved my problem.

Has anyone come across this problem?

---

This is an e-mail from the company Just-Eat Holding Ltd. This e-mail may contain confidential information and/or privileged or personal advice. This e-mail is intended for the addressee(s) stated above only. If you receive this e-mail by mistake, please return it to Just-Eat Holding Ltd without producing, distributing or retaining copies hereof. Thank you.

[gaffe]

I just upgraded and am also having issues with this error.

I had code like this that used to work, and is now throwing an error:

  if ($("#custom-tabContent")[0])
            ko.cleanNode($("#custom-tabContent")[0]); // remove any knockout bindings that might be on these DOM elements


        if (url != "") {
            $("#custom-tabContent").load(url, data, function () {
                if (typeof window[name + 'viewModel'] != 'undefined') //if a viewmodel with the tab name is defined, use that one instead
                    ko.applyBindings(window[name + 'viewModel'], document.getElementById("custom-tabContent"));
                else
                    ko.applyBindings(viewModel, document.getElementById("custom-tabContent"));
            });
        }

I am using 2.3.0.min.js final one...

Basically I am using jquery to load content into a tab then bind onto it once it is loaded. When I load new content in, which could be a completely different tab/model and therefore this section of the page needs to be bound again, I want to make sure I unbind from that section of the page, but I am not having luck doing this. 

If anyone can offer any tips/suggestions on how to unbind from a element that would be appreciated. Please don't say 'rewrite your app so it dosn't need to unbind from an element'. Yes obviously I can do that but that isn't helpful/practical. 

Would it help if I delete the entire element altogether and recreate it? Thoughts?

Thanks,

 Enis

[gaffe]

P.S. I made the same change as Ahmed above and it now seems to be working fine for me. I hope they make this change in the real version so I can use .min.js again instead of this hacked debug one I am using now.

[Michael Best]

The change you made simply breaks the multiple-binding check. This check is in place to let you know you're doing something wrong.

-- Michael

[gaffe]

Ok, but can you tell me if it is possible to remove bindings in some supported way?

Thanks,

  Enis

[Michael Best]

There is not a way to fully remove bindings, but ko.cleanNode is the closest and will prevent the error.

-- Michael

[gaffe]

Sorry to bring this up again but if anyone can help with this I would appreciate it, I am still having trouble upgrading ko.

 

I have a section of the screen in my application that needs to be updated, single-page-app style with entirely new html and entirely new content/models/bindings after an ajax call and so this is why I am rebinding to an element in that section of the page. 

ko.cleannode isn't working for me I am doing cleannode on the element right before applybindings and I am still getting the error even with code like this:

if ($("#custom-tabContent")[0])

            ko.cleanNode($("#custom-tabContent")[0]);

ko.applyBindings(viewModel, document.getElementById("custom-tabContent"));

I debugged into the source and determined that the error is indeed being thrown on element with id custom-tabContent.

Any ideas for me? I have a pretty big app so it's not easy for me to make major changes but is there a different/better way I should be tackling such an objective?  

Would it work if I remove the DOM element entirely instead of just it's contents, before rebinding?

Thanks!

[geomo...@gmail.com]

How to do it the right way?

[Rachel Silver]

What I've done in the past is either bind things to different sections of the page and use postboxes to communicate between the different sections in the page or design my view model with submodels and use the with binding to determine the context of a section...

Without seeing your code it'd be hard to really point you in the correct direction.

[geomo...@gmail.com]

since im still learning how to use knockout im not familiar with the use of the with binding

[Gunnar Liljas]

My best suggestion if you're currently using dynamically loaded content (with Jquery) is to switch to externally loaded KO templates ( https://github.com/ifandelse/Knockout.js-External-Template-Engine ). They can support a very dynamic scenario.

If you still want to using JQuery loading, try to make sure that the dynamically loaded content is encapsulated in one DOM node (like a DIV enclosing all the contents). This can be done programatically, if need be.

That way, you can call applyBindings on the newly loaded/created node, instead of calling it multiple times on the same containing node, which causes binding problems.

/G

2013/11/6 <geomo...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[joe_...@jndconsultinggroup.com]

Thank you for this post as this was an excellent description of the overall problem and helped me fix it in 2 minutes.