Knockout 3.2 components with named templates?

Question

I'm trying to use the new components system in knockout 3.2.0.

There isn't much documentation at the moment, but this does work.

ko.components.register('price-input', {
  template: '<span>price-input</span>'
})

However the template binding allows you to specify a template name that already exists in the DOM, such as:

<script type="text/html" id="price_input">
  <span>price-input</span>
</script>

Then you could do this:

<div data-bind="template: {name: 'price_input'}"></div>

So I tried this:

ko.components.register('price-input', {
  template: {name: 'price_input'}
})

but it doesnt work. Is there a way to use named templates with the new components, or must they be inline or loaded with AMD.

Thanks

Edit: After RP Niemeyer's answer, for clarification here is the template I tried his answer with:

<script type="text/html" id="ifx_price_input">
  <h4>PRICE INPUT <span data-bind="text: value"></span></h4>
</script>

Here is the component code:

ko.components.register('price-input', {
  template: {element: 'ifx_price_input'}
})

It does load the template, but treats it as an escaped string.

Ideas?

score 8 · Answer 1 · answered Jul 11 '14 at 19:57

8

You can pass an element property that is either an element itself or a string that is the id of the element like:

template: { element: 'myTmpl' }

answered Jul 11 '14 at 19:57

RP Niemeyer

114,592
18
291
211

Thanks for taking the time. This gets closer...But please see edits. – InternalFX Jul 11 '14 at 20:41
1

ooh, that actually looks like a bug. – RP Niemeyer Jul 12 '14 at 03:58
1

I don't feel that we are handling this correctly. Discussing it in this thread: https://github.com/knockout/knockout/issues/1418 . I think we should fix it now. – RP Niemeyer Jul 12 '14 at 04:14

score 6 · Accepted Answer · answered Jul 14 '14 at 10:50

In v3.2.0 beta, this case wasn't handled well, hence the hackery needed by InternalFX.

This will be fixed in v3.2.0 final. It will work as you expect - simply reference a script, template, or textarea element, and its logical contents will be intepreted as template nodes.

In case you're interested, the commit that fixes and tests this is here: https://github.com/knockout/knockout/pull/1454

score 1 · Answer 3 · answered Jul 11 '14 at 22:08

Finally solved this with some hackery...I hope this gets answered better by the knockout devs.

This works. Basically I just load the template text manually and pass it to the register function. So it works as if it was inline.

ko.components.register('price-input', {
  template: $('#ifx_price_input').html()
})

Knockout 3.2 components with named templates?

3 Answers3