看了一上午，感觉这确实比所谓传统的APP开发，有很多不一样的地方。
记录下来：
simple-todos.css
/* CSS declarations go here */ /* CSS declarations go here */ body { font-family: sans-serif; background-color: #315481; background-image: linear-gradient(to bottom, #315481, #918e82 100%); background-attachment: fixed; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; font-size: 14px; } .container { max-width: 600px; margin: 0 auto; min-height: 100%; background: white; } header { background: #d2edf4; background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%); padding: 20px 15px 15px 15px; position: relative; } #login-buttons { display: block; } h1 { font-size: 1.5em; margin: 0; margin-bottom: 10px; display: inline-block; margin-right: 1em; } form { margin-top: 10px; margin-bottom: -10px; position: relative; } .new-task input { box-sizing: border-box; padding: 10px 0; background: transparent; border: none; width: 100%; padding-right: 80px; font-size: 1em; } .new-task input:focus{ outline: 0; } ul { margin: 0; padding: 0; background: white; } .delete { float: right; font-weight: bold; background: none; font-size: 1em; border: none; position: relative; } li { position: relative; list-style: none; padding: 15px; border-bottom: #eee solid 1px; } li .text { margin-left: 10px; } li.checked { color: #888; } li.checked .text { text-decoration: line-through; } li.private { background: #eee; border-color: #ddd; } header .hide-completed { float: right; } .toggle-private { margin-left: 5px; } @media (max-width: 600px) { li { padding: 12px 15px; } .search { width: 150px; clear: both; } .new-task input { padding-bottom: 5px; } }
simple-todos.html
<head> <title>Todo List</title> </head> <body> <div class="container"> <header> <h1>Todo List({{incompleteCount}})</h1> <lable class="hide-completed"> <input type="checkbox" checked="{{hideCompleted}}" /> Hide Completed Tasks </lable> {{> loginButtons}} {{#if currentUser}} <form class="new-task"> <input type="text" name="text" placeholder="Type to add new tasks" /> </form> {{/if}} </header> <ul> {{#each tasks}} {{> task}} {{/each}} </ul> </div> </body> <template name="task"> <li class="{{#if checked}}checked{{/if}} {{#if private}}private{{/if}}"> <button class="delete">×</button> <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> {{#if isOwner}} <button class="toggle-private"> {{#if private}} Private {{else}} Public {{/if}} </button> {{/if}} <span class="text"><strong>{{username}}</strong> - {{text}}</span> </li> </template>
simple-todos.js
Tasks = new Mongo.Collection("tasks"); if (Meteor.isServer) { Meteor.publish("tasks", function() { return Tasks.find( { $or: [ { private: {$ne: true }}, { owner: this.userId } ] }); }); } if (Meteor.isClient) { Meteor.subscribe("tasks"); Template.body.helpers({ tasks: function(){ if (Session.get("hideCompleted")) { return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}}); }else{ return Tasks.find({}, {sort: {createdAt: -1}}); } }, hideCompleted: function(){ return Session.get("hideCompleted"); }, incompleteCount: function(){ return Tasks.find({checked: {$ne: true}}).count(); } }); Template.body.events({ "submit .new-task": function (event) { event.preventDefault(); var text = event.target.text.value; Meteor.call("addTask", text); event.target.text.value = ""; }, "change .hide-completed input": function(event){ Session.set("hideCompleted", event.target.checked); } }); Template.task.helpers({ isOwner: function() { return this.owner === Meteor.userId(); } }); Template.task.events({ "click .toggle-checked": function(){ Meteor.call("setChecked", this._id, ! this.checked); }, "click .delete": function(){ Meteor.call("deleteTask", this._id); }, "click .toggle-private": function() { Meteor.call("setPrivate", this._id, ! this.private); } }); Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" }); } Meteor.methods({ addTask: function(text) { if (! Meteor.userId()) { throw new Methor.Error("not-authorized"); } Tasks.insert({ text: text, createdAt: new Date(), owner: Meteor.userId(), username: Meteor.user().username }); }, deleteTask: function(taskId) { var task = Tasks.findOne(taskId); if (task.private && task.owner !== Meteor.userId()) { throw new Meteor.Error("not-authorized"); } Tasks.remove(taskId); }, setChecked: function(taskId, setChecked) { var task = Tasks.findOne(taskId); if (task.private && task.owner !== Meteor.userId()) { throw new Meteor.Error("not-authorized"); } Tasks.update(taskId, {$set: { checked: setChecked} }); }, setPrivate: function(taskId, setToPrivate) { var task = Tasks.findOne(taskId); if (task.owner !== Meteor.userId()) { throw new Meteor.Error("not-authorized"); } Tasks.update(taskId, { $set: { private: setToPrivate } }); } });
截图：
