0

我正在尝试将逻辑放在jsViewscss-width中的 a中。data-link以下两种方法不起作用： 

{{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 值基于属性以使其动态更改？

4

2 回答 2

0

乍一看，我注意到两件事；

  1. 对于第二个设置，我不希望它像写的那样工作...您的辅助函数称为 showKeys，但在模板中您正在调用一个名为 keysWidth 的函数...也许这只是一个转录错误，但它肯定不会那样工作。更改名称以使其匹配（区分大小写，与 JS 中一样）。

  2. 确保您的助手实际上正在加载...例如 $.helpers({helperfunction: function() {...}}) ...有时会导致问题。

于 2013-08-26T16:18:30.643 回答
0

这是一个显示一些变体的 jsfiddle：http: //jsfiddle.net/BorisMoore/GZPvZ/

您的第一个表达式缺少 a ：

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...

更新：现在有一些涵盖 CSS 和类绑定的新示例。有一个关于数据链接的教程序列，其中包括关于数据链接类的这个页面，关于切换类的这个页面，以及关于链接到 CSS 属性的这个页面。

于 2013-08-27T21:47:53.673 回答