Логика в JsViews css-tag

Question

Я пытаюсь поместить логику в css-width в data-link в jsViews. Два следующие подходы не работают:

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

или

{{for Items}} 
    ... 
    <td id="show-keys" data-link="css-width{:~keysWidth()}"> 
... 

<script type="text/javascript"> 
    ... 
    var app = { 
     ... 
     helpers: { 
      showKeys: function() { 
       //debugging shows that this never gets fired 
       return app.ShowKeys ? '400px' : '100px'; 
      } 

Как appropiatly базировать CSS-значение на свойства так, что она изменяется динамически?

Answer 1

Вот jsfiddle, который показывает несколько вариантов: http://jsfiddle.net/BorisMoore/GZPvZ/

Ваше первое выражение Опоздание:

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

должен быть

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

Для второго подхода, используя помощник, кроме имен помощника (я думаю, вы имели в виду, что это было keysWidth - в @BKimmel указывает) - вам нужно объявить о том, что он является вычисляемым наблюдаемой с зависимостью от ~root.showKeys - что вы делаете, как это:

function keysWidth() { 
    return app.showKeys ? '400px' : '100px'; 
} 

keysWidth.depends = "~root.showKeys"; // or you can write ... = [app, "showKeys"] 

В качестве альтернативы вы не можете объявить зависимость, но проход это в качестве аргумента:

data-link="css-width{:~keysWidth3(~root.showKeys)}" 

Помощники могут быть объявлены глобально или переданы с помощью вызова ссылки.

См jsfiddle подробности ...

Update: Есть теперь некоторые новые образцы, которые охватывают CSS и класс связывания. Существует tutorial sequence on data-linking, который включает в себя this page по классу связывания данных, this на класс переключения, и this one при ссылке на атрибуты CSS.

Answer 2

На первый взгляд, я замечаю две вещи;

1. Для второй установки, я не ожидал, что работать как письменный ... Ваш помощник функции называется showKeys, но в шаблоне вы вызываете функцию с именем keysWidth ... возможно, это было просто ошибка транскрипции, но она определенно не будет работать так. Измените имена, чтобы они соответствовали (с учетом регистра, как всегда в JS).

2. Убедитесь, что ваши помощники действительно загружаются ... например. $ .helpers ({helperfunction: function() {...}}) ... иногда это может вызвать проблемы.