21

I would like to implement a different non-HTML DOM backend for Knockout JS, likely within a non-browser type of environment (likely Node.js). Specifically, there exists an old, simple, static UI framework that I'd like to wrap with a DOM and then use with Knockout. I understand that Knockout itself is at least able to operate within Node.js without a browser environment (see here for example), but I'm wondering what I need to implement to create an entirely different DOM.

  • Is it something where I can override a few DOM manipulation classes with my own implementations?
  • Is there any notion of a DOM interface?
  • Or will I likely need to do something from the ground up with an alternate ko.applyBindings, etc.?

I'm just trying to figure out if I'm mostly crazy or completely crazy with regards to the scope of work.

J Trana
  • 2,130
  • 2
  • 18
  • 30
  • I dont really know knockoutjs but problem with dom based frameworks is they write html(as text) into .innerHTML, browser parse it for them and get DOM back. in backend that need a lot of extra things. – YOU Jul 01 '15 at 00:56
  • There seem to be the utils.dom* sources (e.g. utils.domManipulation's setHtml) but I'm trying to understand all the places that the DOM reaches out its tendrils to... – J Trana Jul 01 '15 at 02:08
  • I see this was downvoted - can someone explain why? – J Trana Jul 04 '15 at 00:15
  • 1
    Not me, but I can understand. You're actually saying: *"I'd like to use Knockout but want to replace 50% (=bindings mechanism) of it with a DOM diff like [ReactJS](http://facebook.github.io/react/)'s"*. To my knowledge it is possible to modify *how* Knockout binds to the view with `ko.bindingProvider.instance` (and other utils), but doing away with the entire binding mechanism sounds irreasonable. If anything I would consider this question to be the same as 'Can I build a Knockout fork with a React.js DOM diff'? Yes, with lots of work. So you're 'mostly crazy' =) – Tyblitz Jul 04 '15 at 09:04
  • See now if the downvoter had just left a nice comment like that, we wouldn't be in this position - I really appreciate the constructive feedback. I've never used ReactJS, but in looking at it, it doesn't look like it uses anything approaching MVVM, but much more MVC-ish with a DOM diff. I want MVVM - I don't want a DOM diff, I want to implement an entirely different DOM. I expect that part to be a lot of work, no matter what route I go. But that's not all there is to KO - the whole observables implementation is well done, and technically shouldn't have anything to do with DOM. – J Trana Jul 05 '15 at 00:57
  • 1
    This sounds interesting. Would it help to use something like jsdom inside of node? I use it all the time to get jquery to work sever side. – Robert Moskal Jul 17 '15 at 11:37
  • This also looks interesting. I feel like something like this would be enough to get the DOM loaded, and then maybe extend it in some sort of fashion like @dops answer. Thoughts? – J Trana Jul 19 '15 at 13:32

2 Answers2

1

I think you could do this by creating custom elements (http://knockoutjs.com/documentation/component-custom-elements.html) with custom bindings (http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html) and extending binding syntax (http://knockoutjs.com/documentation/binding-preprocessing.html)

You would probably then have to create a customer element, binding and syntax for every element within your UI, I would suggest maybe creating either a json file with element info and allowing custom elements being created using the json, with the json linking to an widget containing the logic for each element.

dops
  • 825
  • 9
  • 17
  • I think this might be an interesting approach to extend the DOM in the way I'd like; however, I don't think it'll solve KO finding the "root" of the DOM - there seems to be stuff like "document.???" builtin. Any further thoughts on that? – J Trana Jul 19 '15 at 13:26
0

I think jsdom is your best starting point.

trusktr
  • 34,715
  • 41
  • 148
  • 226