Meteorjs：無法隱藏UI元素

我正在關注教程here，這是關於在meteorjs中設置會話變量的。Meteorjs：無法隱藏UI元素

但我無法得到示例工作。點擊隱藏按鈕不會執行任何操作。

JS：

Tasks = new Mongo.Collection("tasks"); 
if (Meteor.isClient) { 
    // This code only runs on the client 
    Template.body.helpers({ 
    tasks: function(){ 
    console.log("function called"); 
     if (Session.get("hideCompleted")) { 
     // If hide completed is checked, filter tasks 
     console.log("success!"); 

     return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}}); 
     } else { 
     console.log("failure!"); 
     // Otherwise, return all of the tasks 
     return Tasks.find({}, {sort: {createdAt: -1}}); 
     } 
    }, 
    hideCompleted: function() { 
     return Session.get("hideCompleted");  } 
    }); 
    Template.body.events({ 
    "submit .new-task": function (event) { 
     // Prevent default browser form submit 
     event.preventDefault(); 
     // Get value from form element 
     var text = event.target.text.value; 
     // Insert a task into the collection 
     Tasks.insert({ 
     text: text, 
     createdAt: new Date() // current time 
     }); 
     // Clear form 
     event.target.text.value = ""; 
    } 
    }); 
    Template.task.events({ 
    "click .toggle-checked": function() { 
     // Set the checked property to the opposite of its current value 
     Tasks.update(this._id, { 
     $set: {checked: ! this.checked} 
     }); 
    }, 
    "click .delete": function() { 
     Tasks.remove(this._id); 
    }, 
    "change .hide-completed input": function (event) { 
     console.log("Changed!"); 
     Session.set("hideCompleted", event.target.checked); 

    } 
    }); 
}

HTML：

<head> 
    <title>Todo List</title> 
</head> 
<body> 
    <div class="container"> 
    <header> 
     <h1>Todo List </h1> 
     <label class="hide-completed"> 
     <input type="checkbox" checked="{{hideCompleted}}" /> 
      Hide Completed Tasks 
     </label> 
     <form class="new-task"> 
     <h2> Add a task </h2> 
      <input type="text" name="text" placeholder="Type to add new tasks" /> 
     </form> 
    </header> 
    <ul> 
     {{#each tasks}} 
     {{> task}} 
     {{/each}} 
    </ul> 
    </div> 
</body> 
<template name="task"> 
    <li class="{{#if checked}}checked{{/if}}"> 
    <button class="delete">&times;</button> 
    <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> 
    <span class="text">{{text}}</span> 
    </li> 
</template>

在開始的時候我的控制檯輸出爲預期：

function called 
failure!

但在點擊hide-completed複選框，則不會觸發事件（即，控制檯日誌不會更改）。我錯過了什麼？

來源

2016-02-26 goelakash

我想說這可能是因爲您在Template.task.events中定義了「切換檢查」處理程序，實際上您的複選框不是「任務」模板的一部分。將您的處理程序放入正文事件中，並且應該正確調用它。

來源

2016-02-26 17:55:36 Rafouille

Meteorjs：無法隱藏UI元素

回答

相關問題