0

jsViewscss-widthの aにロジックを入れようとしています。data-link次の 2 つのアプローチは機能しませんでした。 

{{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-value をプロパティに適切に基づいて動的に変更するにはどうすればよいですか?

4

2 に答える 2

0

一見すると、2 つのことがわかります。

  1. 2番目のセットアップでは、書かれたとおりに機能するとは思いません...ヘルパー関数はshowKeysと呼ばれますが、テンプレートではkeysWidthと呼ばれる関数を呼び出しています...おそらくそれは単なる転記ミスでしたが、間違いなくそのようには機能しません。一致するように名前を変更します (JS では常に大文字と小文字が区別されます)。

  2. ヘルパーが実際にロードされていることを確認してください...例: $.helpers({helperfunction: function() {...}}) ... 場合によっては問題が発生することがあります。

于 2013-08-26T16:18:30.643 に答える
0

これは、いくつかのバリアントを示す jsfiddle です: http://jsfiddle.net/BorisMoore/GZPvZ/

最初の式に : がありません

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

する必要があります

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

2番目のアプローチでは、ヘルパーの命名とは別に、ヘルパーを使用します（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)}"

ヘルパーは、グローバルに宣言するか、link 呼び出しで渡すことができます。

詳細については、jsfiddle を参照してください...

更新: CSS とクラス バインディングをカバーする新しいサンプルがいくつか追加されました。data-linking に関する一連のチュートリアルがあります、データ リンク クラスに関するこのページ、クラスのトグルに関するこのページ、およびCSS属性へのリンクが含まれ

于 2013-08-27T21:47:53.673 に答える