jsrender - Logic in JsViews css-tag -

i trying put logic in css-width in data-link in jsviews. 2 following approaches did not work:

{{for items}}     ...     <td id="show-keys" data-link="css-width{~root.showkeys ? '200px' : '400px'}"> 

or

{{for items}}     ...     <td id="show-keys" data-link="css-width{:~keyswidth()}"> ...  <script type="text/javascript">     ...     var app = {         ...         helpers: {             showkeys: function () {                 //debugging shows never gets fired                 return app.showkeys ? '400px' : '100px';             } 

how appropiatly base css-value on property changes dynamically?

here jsfiddle shows few variants: http://jsfiddle.net/borismoore/gzpvz/

your first expression missing :

data-link="css-width{~root.showkeys ? '200px' : '400px'}" 

should

data-link="css-width{:~root.showkeys ? '200px' : '400px'}" 

for second approach, using helper, apart naming of helper (i think meant keyswidth - @bkimmel points out) - need declare fact computed observable dependency on ~root.showkeys - this:

function keyswidth() {     return app.showkeys ? '400px' : '100px'; }  keyswidth.depends = "~root.showkeys"; // or can write ... = [app, "showkeys"] 

alternatively can not declare dependency, pass in argument:

data-link="css-width{:~keyswidth3(~root.showkeys)}" 

helpers can declared globally, or passed in link call.

see jsfiddle details...

update: there new samples cover css , class binding. there tutorial sequence on data-linking, includes this page on data-linking class, this on on toggling class, , this one on linking css attributes.