JsViews中的邏輯css-tag

我試圖把邏輯放在css-width中的一個data-link在jsViews中。這兩個以下方法沒有奏效：JsViews中的邏輯css-tag

{{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-值，以便動態地改變？

來源

2013-08-23 neo post modern

這裏是一個的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 ...

更新：現在有包括CSS和階級結合一些新的樣本。有一個tutorial sequence on data-linking，其中包括關於數據鏈接類的this page，關於切換類的this和關於鏈接到CSS屬性的this one。

來源

2013-08-27 21:47:53 BorisMoore

@mrs_sheep - 你能確認這個適合你嗎？ – BorisMoore

是的，非常感謝。我只嘗試了第一種[內嵌]方法（這是我想要的）我可以稍後嘗試第二種方法 –

我添加了一些鏈接到新樣本，上面 – BorisMoore

在這裏一瞥，我注意到兩件事;

對於第二個設置，我不會期望，要書面...您的輔助函數被調用showKeys工作，但在模板中要調用稱爲keysWidth功能......也許這只是一個轉錄錯誤，但它絕對不會這樣工作。更改名稱以便匹配（區分大小寫，如同在JS中一樣）。
確保您的幫手實際上正在加載......例如， $ .helpers（{helperfunction：function（）{...}}）...有時會導致問題。

來源

2013-08-26 16:18:30 BKimmel

有沒有一種有效的方法來檢查缺失的輔助函數？ –

JsViews中的邏輯css-tag

回答

相關問題