Does it work with RequireJS?

[gavJackson]

I tried your plugin and verified that it works fine on the knockout website's live examples but it doesn't work with my project.

My current project uses Knockout (obviously), RequireJS, CoffeeScript and a custom Templating engine i have written (that allows templates to be loaded as text by RequireJS). I think one of those three may be preventing your plugin from parsing my view models but am not sure which.

Does the plugin look for a script tag that contains a view model? if so i reckon that might explain why it cannot find my viewmodels as they are all loaded as dependencies with RequrieJS.

I don't think the issue would be CoffeeScript because by the time the browser sees my code it is already compiled into JS (by RequireJS).

Perhaps my non standard templating engine is causing issues, although all it does it centralise where templates can be found:

templateEngine = new knockout.nativeTemplateEngine()

templateSource = knockoutTemplateSource(templateEngine, WrapperViewModel.getInstance().templates)

knockout.setTemplateEngine(templateSource)

Any ideas? I would love to be able to use your extension for my projects.

Here is a screenshot which shows my DOM and your plugin, it shows how i have nested view models and templates:

[timstuyckens]

Hi,

The extension uses ko.dataFor() .
Maybe this doesn't work in your scenario.

Can you select a dom node and type 'ko.dataFor($0)' in the console and see what it does?
$0 is a standard chrome console variable that represents the selected dom element

[gavJackson]

Hi,

I get an undefined in the console when i type 'ko.dataFor($0)', also an undefined for contextFor.

I have never used dataFor before, i don't suppose you know what could prevent it from working? I've googled it and had a read of the docs but nothing obvious is coming up as to what i have done that might break it.

Anyway cheers for the quick response.

On 30 May 2013, at 11:39, timstuyckens notifications@github.com wrote:

Hi,

The extension uses ko.dataFor() .
Maybe this doesn't work in your scenario.

Can you select a dom node and type 'ko.dataFor($0)' in the console and see what it does?
$0 is a standard chrome console variable that represents the selected dom element

—
Reply to this email directly or view it on GitHub.

[timstuyckens]

I'am not 100% sure but I think it has to do something with your custom templating. But as long as the default knockout function 'dataFor' not works, the extension will not work.

Wild guess for a solution:
A blogpost by Ryan with help for using AMD with knockoutjs. http://www.knockmeout.net/2013/05/knockout-amd-helpers-plugin.html
In that blogpost he used a custom template enginge (which he described in another blogpost, I think) : http://www.knockmeout.net/2011/10/ko-13-preview-part-3-template-sources.html
he is one of the core contributers to knockout so he is pretty smart :)

He has a fiddle:
jsfiddle: http://jsfiddle.net/rniemeyer/3598P/

I tested the knockout extension on this url : http://fiddle.jshell.net/rniemeyer/3598P/show/ and it worked.
(using the shell url because jsfiddle uses iFrames and than the extension does not work)

So I guess you can compare your templating with that from Ryan and maybe it will give a solution.

Best luck,

Tim.

[gavJackson]

I based my own templating engine on Ryans older article about template sources, its interesting to see how his approach with amd plugins differs form my own, where I load the external templates using requireJS in the view model and he defines their location in html templates but they both end up in the same place (a central repository for viewmodels) his way is just nicer (i think).

It is also interesting that your plugin does work on that fiddle as its quite similar to how i do my own templating. My brother has also verified that your plugin works on his own project and he uses the external template engine as mentioned in Ryans post. I am definately doing something weird it just a case of figuring out what :-)

i will keep digging and let you know if i work out what the problem is

cheers

On 30 May 2013, at 12:09, timstuyckens notifications@github.com wrote:

I'am not 100% sure but I think it has to do something with your custom templating. But as long as the default knockout function 'dataFor' not works, the extension will not work.

Wild guess for a solution:
A blogpost by Ryan with help for using AMD with knockoutjs. http://www.knockmeout.net/2013/05/knockout-amd-helpers-plugin.html
In that blogpost he used a custom template enginge (which he described in another blogpost, I think) : http://www.knockmeout.net/2011/10/ko-13-preview-part-3-template-sources.html
he is one of the core contributers to knockout so he is pretty smart :)

He has a fiddle:
jsfiddle: http://jsfiddle.net/rniemeyer/3598P/

I tested the knockout extension on this url : http://fiddle.jshell.net/rniemeyer/3598P/show/ and it worked.
(using the shell url because jsfiddle uses iFrames and than the extension does not work)

So I guess you can compare your templating with that from Ryan and maybe it will give a solution.

Best luck,

Tim.

—
Reply to this email directly or view it on GitHub.

[timstuyckens]

Closing the issue because the problem is not in the plugin.

[brianmhunt]

I have a similar setup to the one described in this issue, but the outcome when using the (what would be awesome) plugin is significantly worse.

Critically, with the plugin installed when I open the Developer Tools the page/tab locks up and CPU usage for it goes to 100%. When I disable the plugin the Developer Tools runs normally.

Once can see under the KnockoutJS title in the Developer Tools the single line vm_toJS: object. It has a triangular glyph next to it that typically indicates that more information will be presented when clicked, but when clicking it nothing happens.

When the plugin is installed, $0/etc is undefined.

Without the plugin ko.dataFor($0) works as expected.

This may or may not be the issue set out above, but nevertheless the setup is similar enough (coffee script, custom templating, RequireJS) that the cause may be similar. There are lots of potential sources - I would be happy to assist.

[timstuyckens]

Hi,

Is it possible to provide a small page that reproduces the problem?
If not, I created a wiki page that shows how you can debug the extension. If you find it you can make a PR or give me a hint on the fix.

https://github.com/timstuyckens/chromeextensions-knockoutjs/wiki/Contribute

[brianmhunt]

Thanks Tim - I will have to debug since the page is a bit too big to decompose. I am on a deadline until th 18th or so but hope to file an issue before or around then. Cheers 🍻