Add an option to persist data-bind attributes about htmlizer HOT 9 CLOSED

Question: Are there also bindings within your data-bind attribute that are exclusively for the client-side?

from htmlizer.

Yes. There probably will be. I'd prefer if htmlizer, when put in this mode, would just ignore bindings that it does not support.

var template = '<div data-bind="text: textContent, foo: bar"></div>';
var viewModel = { textContent: 'foobar' };
var output = (new HTMLizer(template).toString(viewModel);

The variable output should contain the following string:

<div data-bind="text: textContent, foo: bar">foobar</div>

This might be problematic as the bar value in the foo binding might trigger a ReferenceError when you evaluate the binding value. But this is the behaviour that I want...

from htmlizer.

If it prooves to be way to complex, I could live with having to write a transform function that took a template of

<div data-bind="text: textContent, foo: bar"></div>

and converted it into

<div data-htmlizer="text: textContent" data-bind="text: textContent, foo: bar"></div>

Essentially it's just a matter of duplicating the data-bind attribute and filtering the bindings down to the subset that htmlizer supports.

from htmlizer.

It is easy to ignore bindings that isn't supported.

What I was concerned is whether you provide data for all the supported bindings. If in your last example, textContent is undefined, then it would be more difficult to figure out when to ignore the binding and when to take undefined as a valid input. In KO and Htmlizer, null and undefined is valid input for the text binding (it just converts them to empty string). So hopefully that isn't part of your use case.

from htmlizer.

Anything rendered on the server should be discarded once it re-renders on the client.

The main caveat of that is that we will have to avoid anonymous templates.

If we have this template:

<div data-bind="text: textContent, foo: bar"></div>

I want htmlizer to turn it into:

<div data-bind="text: textContent, foo: bar">The value of textContent.</div>

And once I rerender on the client side, it will be reevaluated by knockout. In this case, it means that the text node The value of textContent will be replaced by whatever the client thinks is the value of textContent.

This is a bit wasteful, but it is about as good as it gets when we try to do server side rendering of a knockout application.

I hope that explains it.

from htmlizer.

@gustavnikolaj : Have a look whether the changes in the keepbindings branch satisfies your use case.

One more feature Htmlizer is missing at the moment is KO custom elements/components. Maybe you'd need that as well to write "isomorphic KO".

from htmlizer.

Thanks alot! I'll make sure to get back to you once I've tried it out :-)

from htmlizer.

@Munawwar LGTM! 👍

from htmlizer.

Merged and released v2.1.0.

from htmlizer.