Pass parameter to nested jquery template

[maro...@gmail.com]

I am currently using a sequence of jquery templates to create a list structure that gets converted to a tree. I need to pass a value from a branch node to all its leaf nodes as a parameter, in order to modify their visible binding.
I am pasting some of the code below, what I need is  the "tableName" value that appears in the tableTemplate to be visible in the "preferenceTemplate" , so I can modify its visibility by comparing "tableName" to the "selectedTable" attribute of the preference.
The same set of preferences is referenced by all tables, therefore I cannot do it by simply adding a visible attribute to each preference.
Is there any way to do this via knockout? Or maybe I should try modifying it to a pure jquery template and use the options parameter?

<script type = "text/x-jquery-tmpl" id = "tableTemplate">
<li class="liClosed"><img src="images/table.gif"> </img><span data-bind='text:tableName'></span><span class='tableSpan'></span>
<ul data-bind="template: {name:'serverdataAttributeTemplate', foreach: attributes}">
</ul>
<ul data-bind="template: {name:'profileTemplate', foreach: profiles}">
</ul>
</li>
</script>

<script type = "text/x-jquery-tmpl" id = "profileTemplate">
<li class="liClosed"><img src="images/profile.gif"> </img><span data-bind='text:profileName'></span><span class='profileSpan'></span>
<input type='checkbox' data-bind='checked:isUsed'></input>
<ul data-bind="template: {name:'preferenceTemplate', foreach: preferences}">
</ul>
</script>

<script type = "text/x-jquery-tmpl" id = "preferenceTemplate">
<li><img src="images/smiley.gif"> </img><span data-bind='text:preferenceName' oncontextmenu = 'editPreference'></span>
<input type='checkbox' data-bind='checked:isUsed'></input>
</li>
</script>

[rpn]

KO's jQuery template engine does support passing options via the "templateOptions" parameter to the template binding.  The values passed can be accessed via $item.myValue.  Here is an article about templateOptions.

[maro...@gmail.com]

Does "templateOptions" work with the "foreach" binding?

I tested the following, and the ${$item.header} span is empty.

<script type = "text/x-jquery-tmpl" id = "tableTemplate">
<li class="liClosed"><img src="images/table.gif"> </img><span data-bind='text:tableName'></span><span class='tableSpan'></span>

<ul data-bind="template: {name:'serverdataAttributeTemplate', foreach: attributes, afterRender: convertTrees}">
</ul>
<ul data-bind="template: {name:'userProfileTemplate', foreach: profiles, afterRender: convertTrees, templateOptions: { header: 'table1' }  }">
</ul>
</li>
</script>
<script type = "text/x-jquery-tmpl" id = "serverdataAttributeTemplate">
<li><img src="images/attribute.gif"> </img><span data-bind='text:attributeName'></span>
</li>
</script>
<script type = "text/x-jquery-tmpl" id = "userProfileTemplate">

<li class="liClosed"><img src="images/profile.gif"> </img><span data-bind='text:profileName'></span><span class='profileSpan'></span>
<input type='checkbox' data-bind='checked:isUsed'></input>

<span>${$item.header}</span>
<ul data-bind="template: {name:'serverdataPreferenceTemplate', foreach: preferences, afterRender: convertTrees }">
</ul>
</script>

[rpn]

It does work with foreach in jQuery Templates.  Maybe you can try to reproduce your scenario based on this fiddle:  http://jsfiddle.net/rniemeyer/uZMBu/

[maro...@gmail.com]

http://jsfiddle.net/uZMBu/2/

I have reproduced it using the fiddle ;  Using $item.header to bind directly works, however trying to use it in the visible binding as shown doesn't seem to.

[rpn]

Hello-

myHeader is a reference to an observable in this case and when you use an observable in an expression, then you need to reference it as a function (to return its value).

It would look like:

<span data-bind="text: 'hello', visible: $item.myHeader() == 'my header'"></span> 

http://jsfiddle.net/rniemeyer/uZMBu/5/ 

[maro...@gmail.com]

Ugh, I thought it was copying the value. Makes sense. Thank u so much!