Generate Knockout.js virtual elements

[vstirbu]

Add ability to generate Knockout.js virtual elements from block comments. For example:

//ko if: true
  #test

outputs:

<!-- ko if: true -->
<div id="test"></div>
<!-- /ko -->

[vendethiel]

What about passing your own Compiler ? I think it's better in your use case since this kind of things does not belong in the official compiler

[vstirbu]

Yes, this feature does not concern an audience as large as that of the vanilla jade compiler, but forking jade just to add this feature is not very nice either... You just lost all new fixes and features that come along in jade without actively maintaining the fork.

Is there a way to gracefully extend the compiler to handle what might be considered niche cases?

[vendethiel]

Yes, you can pass it as an option - sorry I was unclear :)!

[vstirbu]

Got it now! :)

So, basically i can have a "patch" compiler that does its stuff and then pass the intermediate result to jade.

[ForbesLindesay]

Would this still work if it was 'ko '. If so, that would be less likely to catch things that just happened to be comments starting with ko.

[ForbesLindesay]

You can do something like:

var Compiler = require('jade').Compiler;
function KoCompiler(node, options) {
  Compiler.call(this, node, options);
}
KoCompiler.prototype = Object.create(Compiler);
KoCompiler.prototype.constructor = KoCompiler;

var oldVisitBlockComment = Compiler.prototype.visitBlockComment;
KoCompiler.prototype.visitBlockComment = function (comment) {
    if (0 == comment.val.trim().indexOf('ko ')) {
      this.buffer('<!-- ' + comment.val.trim() + ' -->');
      this.visit(comment.block);
      this.buffer('\\n');
      this.buffer('<!-- /ko -->');
    } else {
      return oldVisitBlockComment.call(this, comment);
    }
};

then just do:

jade.renderFile('foo.jade', {compiler: KoCompiler}, callback);

[tj]

I don't like the idea of special-casing for any particular framework sorry! Too much of a maintenance burden

[vstirbu]

Yes, it makes sense to close this, and ForbesLindesay' comment provides a nice solution for my problem.

[nashibao]

What about using jade mixin? I wrote an example here. https://gist.github.com/nashibao/7889825

mixin if(val)
  <!-- ko if: #{val} -->
  block
  <!-- /ko -->