munawwar / htmlizer Goto Github PK
View Code? Open in Web Editor NEWKnockout Templates for Node.js
License: MIT License
Knockout Templates for Node.js
License: MIT License
The following code expected to render, template person-template
like knockout templating, but its gives an error.
var html = `<!-- ko template: { name: tpl, data: buyer } --><!-- /ko -->'
<!-- ko template: { name: tpl, foreach: [buyer] } --><!-- /ko -->`;
var cfg = {
templates: {
"person-template": `<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>`
}
};
var outputHtml = (new Htmlizer(html, cfg)).toString({
tpl: "person-template",
buyer: {
name: 'Franklin',
credits: 250
}
});
$ node -p -e 'new (require("htmlizer"))("<!DOCTYPE html>\n<html><head></head><body></body></html>").toString()'
<html><head></head><body></body></html>
Expected output:
<!DOCTYPE html>
<html><head></head><body></body></html>
Script tags are being stripped out by htmlizer.
Optional bindings:
Here's a reproducible bit of code:
<ul>
<!-- foreach: products -->
<li><a data-bind="text: name"></a></li>
<!-- /foreach -->
</ul>
The output from this is:
<ul>
<li></li><a>Name 1</a>
<li></li><a>Name 2</a>
</ul>
Test case:
var template = new Htmlizer('<script type="text/html" id="shopping-cart">\
<div>The shopping cart</div>\
</script>');
template.toString();
Expected output:
<script type="text/html" id="shopping-cart">
<div>The shopping cart</div>
</script>
Actual output:
<script type="text/html" id="shopping-cart">
<div>The shopping cart</div>
</script>
Currently we cannot build htmlizer under nodejs 4.0 as the jsdom dependency is too old.
I'm not sure if there's a version of jsdom that works across all node.js versions.
Use case: To use htmlizer on server-side to do a render, but preserve any event binding for client-side so that it can be used with knockoutjs.
However, the use case I only anticipated is that the same template would be used on client and server side, and so currently data-bind attribute is completely stripped off by htmlizer.
Note: There could be a second use case, where user needs to do a partial render with htmlizer. To solve that, we'll need a separate attribute like data-htmlizer or something.
We're using htmlizer 0.8.0 in a project we wish to update to node v6, without updating to htmlizer v2 in the same iteration. This breaks due to jsdom's interface supposedly breaking when recompiling on nodejs v6:
___/htmlizer/node_modules/jsdom/lib/jsdom/level1/core.js:553
Array.prototype.splice.call(this._childNodes, refChildIndex, 0, newChild);
^
TypeError: Cannot set property length of [object Object] which has only a getter
at DocumentFragment.core.Node.insertBefore (/htmlizer/node_modules/jsdom/lib/jsdom/level1/core.js:553:30)
at DocumentFragment. (/htmlizer/node_modules/jsdom/lib/jsdom/level2/events.js:332:20)
at DocumentFragment.proto.(anonymous function) as insertBefore
at DocumentFragment.core.Node.appendChild (_/htmlizer/node_modules/jsdom/lib/jsdom/level1/core.js:671:17)
at ___/htmlizer/src/jquery.js:3:2360
at __/htmlizer/src/jquery.js:3:2615
at b.object.module.object.module.exports.module.exports (/htmlizer/src/jquery.js:2:201)
at window (_/htmlizer/src/Htmlizer.js:15:32)
at Object. (_/htmlizer/src/Htmlizer.js:24:2)
I tested with small increments to the jsdom version, and found that updating from 0.10.3 to 1.5.0 seems enough. For now, we've made a fork at https://github.com/mwoc/htmlizer/tree/v0 with this update, which probably is ok - but if others might need htmlizer v0.x to work on nodejs v6, then maybe an official patch might be worthwhile.
Make a special binding fro data-bind attribute that will allow an object literal rather than string.
There are two things that I'd like to update:
I would like a feature that allows a data-bind to be applied, but also persisted.
It has some drawbacks- in particular regarding inlined templates - but it is something that will enable us to easily bootstrap parts of a knockout application server side to help non-js users and crawlers.
$ node -p -e 'new (require("htmlizer"))("<div data-bind=\"attr: {foo: bar}\"></div>").toString({bar: "\""})'
<div foo="""></div>
Expected output:
<div foo="""></div>
or:
<div foo="""></div>
Like .
and similar for html and template binding?
Htmlizer templates can be used with assetgraph-builder via the data-i18n attribute and this works fine when the template is run through buildProduction. But I'd like to be able to use the templates during development as well. Any ideas?
Here's an example:
<div>
<!-- if: !value -->
blah blah
<!-- /if -->
<p>This is after</p>
</div>
If you try to render that with value
set to a non-falsy value, This is after
will not be rendered.
I would like this mostly to get it working with assetgraph-builder which strips html comments out except for certain conditions. And Andreas is willing to make an exception if we agree upon an easily recognizable prefix.
Can we publish a new version for npm?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.