timstuyckens/chromeextensions-knockoutjs

info: "Please select a dom node with ko data." for every node

devguydavid opened this issue · 7 comments

devguydavid commented

Tracing works beautifully for me. Unfortunately, no matter what node I select in the webapp I'm developing, all I get in the knockout context panel is 'info: "Please select a dom node with ko data."'

I've never debugged an extension before. I was able to pull up this extension in a separate devtools window and find the source, but I have not yet been able to get a breakpoint to trigger.

Following the advice in issue #8, I tried selecting a node and executing 'ko.dataFor($0)' which did return a valid object.

This is most likely an issue specific to my setup as the context panel works fine with the knockout.js examples.

What else can I try?

timstuyckens commented

Can you provide some details about the setup, what is different than the knockout.js samples?
*Are you using AMD?
*Any external templating engine? (if so, there are setups that have problems #9)

Is the website public available? That would be great :)

I have put some additional info in the wiki page in case you want to investigate this further.
https://github.com/timstuyckens/chromeextensions-knockoutjs/wiki/Contribute (see Catch )

I also released a new version (2.3) that contains some additional error handling ( cab93a7 and 4e08bfd ) . This might show the root cause.

devguydavid commented

I'm not using AMD nor an external template engine.

You can access the site at http://cms.uplynk.com/static/cms/index.html. You will have to sign up for a new account, or I can set up a test account for you if you'd like.

I will continue to investigate with the new version you've put out, too.

devguydavid commented

It looks like

copy["$root_toJS"] = ko.toJS(context[props[i]]);

is causing the problem. ko.toJS() causes the error TypeError: Accessing selectionDirection on an input element that cannot have a selection.

devguydavid commented

For future reference: I believe this is because there is a DOM object in there, and DOM elements seem to be notorious for being difficult to serialize because of things like circular references in them.

I'm coming back to javascript after a break of many years, so if I'm wrong here I'm happy to continue digging. But this is my current guess, and I don't know if there's a good way around it at this point. Maybe "scrub" the rootObject that's being processed of any DOM elements before turning it into JS?

timstuyckens commented

Short answer: no quick fix voor $root_toJS, but at least you can see the $data and bounded properties.

Long answer:
Normally you shouldn't have any dom elements in your viewmodel. If you do MVVM 100% correct you will never have to do any jQuery stuff in the viewmodel.

I took a short look at uplynck CMS (which looked really cool) and I think you can improve the knockout code, if you do so, the plugin will also work.

  • First: upgrade to 2.* It has a lot of awesome features, see http://blog.stevensanderson.com/2011/12/21/knockout-2-0-0-released/ for more details
  • You can use point 4 of the blog post to extract the dom manipulation out of the viewmodel
  • For things like popups, creating a custom binding is often a solution. If you use plugins, changes are pretty good somebody already wrote a custom binding.

I don't like the idea of implementing a 'scrub' like thing because it is not the correct way of using knockout.

devguydavid commented

I'm actually in the process of moving our CMS to 2.x which is what started me down this path. I appreciate your input and ideas on that. The code is pretty old now and I'm working on bringing it up to "modern" KO.

Fair enough on the scrubbing. I'm still new to KO so I appreciate your insight there, as well.

timstuyckens commented

@cygnl7 You might want to check out the new option: #9 (comment)