Question

Im trying to template some components often used in my project. To omit the introduced redundancy in html content. However i didnt figure it out if it is even possible to do so.

I have a template like:

<script type="text/x-jquery-tmpl" id="somefieldtemplate" >  
<input  name=" Prefix" type="text" data-bind="value: ${ $item.fieldName}SomeField" /> 
   ..... mor contents ... 
</script>

The parameter bound to the input component shall be adjustable as someone may see via template options so i have an entry like

<div data-bind="template: { name: 'somefieldtemplate', 
         templateOptions: 
             { fieldName:'somefield', displayName:'somefieldlabel' } }">

The error message in my console log is:

SyntaxError: Unexpected token {

I narrowed the problem down to the fact that if i remove $item.fieldName with its value it works.

Has anybody an enlightening solution to this problem maybe ?

Edit:

As information im currently using knockout.js in version: knockout-latest

Answer 1

Sadly i need to answer it myself. But i managed to get it working. Thanks to the tip of RP Niemeyer.

For everyone interested in this:

Observables are generated dynamically in the model someModel with a register component method. This observables have always names like <field>SomeField

Template:

<script type="text/x-jquery-tmpl" id="somefieldtemplate" >  
<input  name="${$item.fieldName}Prefix" type="text" data-bind="value: someModel[$item.fieldName + 'SomeField']" /> 
   ..... more contents ... 
</script>

Template-Binding:

<div data-bind="template: { name: 'somefieldtemplate', 
         templateOptions: 
             { fieldName:'somefield', displayName:'somefieldlabel' } }">