Passing markup into modules about knockout-amd-helpers

[rniemeyer]

@AmyAmy - Let me look into this a little bit and see what makes the most sense. Also, so I understand the context, can you explain the reason that you need the original nodes? Thanks!

[rniemeyer]

@AmyAmy Sorry for the delay in getting this in. Thank-you for the idea/issue!

[AmyAmy]

Ok, actually, I think I have something that works:

when I add
var originalChildNodes = ko.utils.makeArray(ko.virtualElements.childNodes(element));
in ko.bindingHandlers.module.init
and then add $moduleTemplateNodes: originalChildNodes to the context.extend I get something that seems to work, Can't say anything about what sideeffects that would have, but I could make that into a pull request if you'd like.

Any clue if that would be a good approach?

[AmyAmy]

sure, to way oversimplify things: i'm working on a wysiwyg-like editor, in which modules can be nested into eachother in arbitrary ways.

so there could module which has conditions (checkboxes) which toggle the visibility of the contents of the module (which in turn could contain other modules).

Currently i'm using components, but I would prefer using your modules. (the code above I just copied from the knockout-components source)

[rniemeyer]

@AmyAmy - I looked at this a bit tonight. I think it would be okay to add this functionality into the library. I would like to make sure that this satisfies your scenario though: what do you end up doing with $moduleTemplateNodes in this case? Do you have a custom binding that looks for the nodes and puts them back in place or something else? Would like to make sure that is not a better/nicer option that would make it easier to work with the nodes.

If you are interested in doing a pull request with these changes, let me know. Otherwise, I can get the changes in there as well. No worries either way.

[AmyAmy]

Usually I reuse them by having a
<!-- ko template: { nodes: $moduleTemplateNodes, data: $data } --><!-- /ko -->
somewhere inside the template.

The thing I'm worried most for is there could be additional knockout bindings inside the $moduleTemplateNodes, which should bind correctly. Even if there is, say, a <!-- ko if: [...] --> or a <!-- ko foreach: [...] --> surrounding the template-binding which is inserting the original nodes.

Hope that makes any sense. I'll try to make time to build some simple test-cases later today.

[AmyAmy]

https://gist.github.com/AmyAmy/1e06a8bb6142c625857bea6ab4895e75

I did run into one issue: had to disable the isAnonymous check, not sure what can be done about this.

[rniemeyer]

@AmyAmy - seems like maybe the module binding should support an option (not quite sure what to call it) that would specifically grab the child nodes, put them on the context, and remove them prior to the isAnonymous check.

[AmyAmy]

yeah that seems like the best approach. if only naming things wasn't so hard... :)
perhaps a moveNodesToContext: true or something like that?

[rniemeyer]

@AmyAmy - I like moveNodesToContext for a name!

[rniemeyer]

@AmyAmy - I implemented this option in this branch: https://github.com/rniemeyer/knockout-amd-helpers/tree/feature-allow-child-nodes. Perhaps you could grab the library from the build directory of that branch and give it a shot. If all is well, then I will finish it up with tests and get it in the library.

[AmyAmy]

@rniemeyer

I Have been testing and working with the new build all day yesterday and today. haven't found any issues! :)

Thanks so much for putting this in. I would have wanted to do a pull request to save you the trouble, but I was struggling with getting the build env set up and such :(

[rniemeyer]

@AmyAmy - sorry that you had trouble with the build environment. It is a bit outdated at this point. I may revamp it one of these days :). I would be happy to help you get it going, if you should need to in the future.

I'll pursue getting this change in and tested to a released version. Glad it is working for you. It is a really interesting/useful feature for sure.

[rniemeyer]

This has been implemented (finally) in the latest version (v1.0.0).