css - JsViews css-tag 中的逻辑

Question

我试图将逻辑放在 jsViews 的 data-link 中的 css-width 中。以下两种方法无效:

{{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';
            }

我如何适本地将 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)}"

Helpers 可以全局声明，或通过链接调用传入。

有关详细信息，请参阅 jsfiddle...

更新: 现在有一些涵盖 CSS 和类绑定(bind)的新示例。有一个 tutorial sequence on data-linking , 其中包括 this page关于数据链接类，this关于切换类，和this one关于链接到 CSS 属性。