Custom HTML elements in templates

[andrewdavey]

This is an idea for a future version of knockout, or perhaps a plugin, which would reduce the amount of boilerplate HTML in templates. For example, when using Twitter Bootstrap this is the HTML for a form field:

<div class="control-group">
    <label class="control-label">First name</label>
    <div class="controls">
        <input type="text" data-bind="value: firstName" />
    </div>
</div>

It would be interesting if I could instead write:

<controlGroup label="First name">
    <input type="text" data-bind="value: firstName" />
</controlGroup>

And somehow register a custom HTML element with the template engine so it knows to expand controlGroup elements.

Thoughts?

[mbest]

You could probably create custom bindings combined with a custom binding handler to do this. I don't think this is something we'll want to include in Knockout though.

[rniemeyer]

This sounds kind of interesting, but probably best left to a plugin. As Michael said, you could use custom bindings that expand out into more complex HTML or you could even use a custom binding provider that looks for certain elements and replaces them with additional elements before doing the binding.

[SteveSanderson]

Interesting idea, and you can in fact do roughly that with a custom binding. For example,

... where "controlgroup" is a custom binding that adds markup around its contents.

I'm not sure how custom elements (e.g., ) would best be implemented. I guess theoretically, KO could let you register the names of some custom elements and then bind them with a particular binding even if they don't have any data-bind attribute. You could implement that with a custom binding provider.

On 6 June 2012 14:55, Andrew Davey < reply@reply.github.com

wrote:

This is an idea for a future version of knockout, or perhaps a plugin, which would reduce the amount of boilerplate HTML in templates. For example, when using Twitter Bootstrap this is the HTML for a form field:

<div class="control-group">
   <label class="control-label">First name</label>
   <div class="controls">
       <input type="text" data-bind="value: firstName" />
   </div>
</div>

It would be interesting if I could instead write:

<controlGroup label="First name">
   <input type="text" data-bind="value: firstName" />
</controlGroup>

And somehow register a custom HTML element with the template engine so it knows to expand controlGroup elements.

Thoughts?

---

Reply to this email directly or view it on GitHub: https://github.com/SteveSanderson/knockout/issues/514

[SteveSanderson]

Oh, apologies to Michael and Ryan - I posted my response directly from email so I didn't realise you guys had already answered.

[andrewdavey]

Thanks for the responses guys. I agree this would work best as a separate plugin for knockout.

I modified the native template engine yesterday with moderate success. I altered renderTemplateSource to scan the template nodes and replace the custom elements with their expanded forms. If I get some time I'll try to at least publish some sample code and a write-up.