您的位置：首页 > 其它

来看看Meteor的功能

2015-12-20 13:30 337 查看

看了一上午，感觉这确实比所谓传统的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 } });
}
});

截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航