Question

我正在尝试将j css-width中的逻辑放入jsViews中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值基于属性以使其动态变化？

Answer 1

在这里，我注意到两件事;

对于第二个设置，我不希望它按照书面工作...你的帮助函数叫做showKeys，但是在模板中你调用的是一个名为keysWidth的函数......也许这只是一个转录错误，但绝对不会那样。更改名称以使它们匹配（区分大小写，与JS一样）。
确保您的助手实际上已加载......例如$ .helpers（{helperfunction：function（）{...}}）...有时会导致问题。

Answer 2

这是一个显示一些变体的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)}"

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

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

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

JsViews css-tag中的逻辑

2 个答案: