流星火焰待辦事項應用程序檢查條件

我已經通過流星待辦事項應用教程走了，在checking off and deleting tasks part它說，

如果你嘗試檢查了一些任務在添加完所有上面的代碼之後，你會看到簽出的任務有一條線穿過它們。這是由下面的代碼片段啓用：

<li class="{{#if checked}}checked{{/if}}">

有了這個代碼，如果一個任務的檢查屬性爲true，則檢查類添加到我們的列表項。使用這個類，我們可以使檢查關閉的任務在我們的CSS中看起來不同。

有什麼辦法可以讓這適用於不同的標籤，而不是列表？所以基本上把它說

有了這個代碼，如果一個任務的檢查屬性爲true，則updatedstyle 類添加到我們的img標籤。使用此課程，我們可以製作檢查任務使圖像在我們的CSS中看起來不同。

來源

2016-11-05 heathedner

它就像一個'''if else'''語句，但是可以在'''template''裏面工作。您可以將它用於任何html元素。例如，''''''目前，模板中的條件語句只能檢查真值。其他運營商不支持開箱即用。但是你究竟想要做什麼呢？ – blueren

您可以將{{#if}}放在您的模板的任何位置，而不僅僅是在列表項中。如果我理解您的具體問題：

<li>Some item 
    <img class="{{#if checked}}updatedstyle{{/if}}" src="/myImg.png"> 
</li>

每@blueren，參數爲{{#if}}被評價爲truthy或falsy值。它可以是當前數據上下文中的一個鍵（即this.checked），也可以由助手返回。

來源

2016-11-06 04:53:22

如果你想被動綁定到HTML標籤的模板類，你可以做這樣的：

模板代碼：

<template name="MyTemplate"> 
    <img src="my/img/path.jpg" class={{checked.img}}/> 

    <ul> 
    <li class={{checked.li}}>My List Entry</li> 
    </ul> 
</template>

助手代碼：

Template.MyTemplate.helpers({ 
    checked() { 
    let liClass = ''; 
    let imgClass = ''; 
    //your checked condition 
    if(document.getElementById('myCheckBox').checked) { 
     let liClass = 'checked'; 
     let imgClass = 'updatedstyle'; 
    } 
    return { 
     li: liClass, 
     img: imgClass 
    }; 
    } 
});

那您可以使用不同名稱將多個類綁定到選中的輸入值。

來源

2016-11-06 07:34:47 NRiebesel

流星火焰待辦事項應用程序檢查條件

回答

相關問題