如何將class.bind條件從視圖移動到Aurelia repeat中的模型

在實現class.bind時，我偶然發現了一個問題（至少我認爲它是一個問題），但我並不喜歡太多在視圖中的邏輯，並正在考慮移動到組件的模型，但它似乎是棘手的。我正在實施步驟進度條如何將class.bind條件從視圖移動到Aurelia repeat中的模型

<template > 
    <ul class="all-steps"> 
    <li repeat.for="step of steps" class.bind="current === step ? 'active': (previous.indexOf(step) >= 0 ? 'done':'')">${$index + 1}</li> 
    </ul> 
</template>

有沒有什麼辦法可以將所有這些類分配邏輯視圖？我試圖用髒綁定創建一個綁定函數，但顯然從視圖中通過step原因Unhanded rejection exception任何建議，讚賞

來源

2016-12-02 mr. Holiday

所有你需要做的是編寫一個函數，採取各種參數。最好的部分是，這不會觸發髒檢查。如果參數的值發生變化，Aurelia只會調用函數。

下面是一個例子：https://gist.run?id=837b35139b924682143e74f4e7ca85ba

app.html

<template> 
    <ul class="all-steps"> 
    <li repeat.for="step of steps" class="${calculateClass(current, step)}">Step 1: ${$index + 1} (${calculateClass(current, step)})</li> 
    </ul> 
</template>

app.js

export class App { 
    current = 3; 
    steps = [ 1, 2, 3, 4, 5 ]; 
    previous = [ 1, 2 ]; 

    calculateClass(current, step) { 
    console.log(`called. current = ${current}, step = ${step}`) 
    if(current === step) { 
     return 'active'; 
    } else if (this.previous.indexOf(step) >= 0) { 
     return 'done'; 
    } else { 
     return ''; 
    } 
    } 
}

的index.html

<!doctype html> 
<html> 
    <head> 
    <title>Aurelia</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <style> 
     li { 
     background-color: green; 
     } 

     li.active { 
     background-color: yellow; 
     } 

     li.done { 
     background-color: red; 
     } 
    </style> 
    </head> 
    <body aurelia-app> 
    <h1>Loading...</h1> 

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> 
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> 
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> 
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> 
    <script> 
     require(['aurelia-bootstrapper']); 
    </script> 
    </body> 
</html>

來源

2016-12-02 14:34:15

非常感謝我唯一缺少的東西是什麼時候該函數被觸發:) –

如何將class.bind條件從視圖移動到Aurelia repeat中的模型

回答

相關問題