Meteor 有人在改进todo示例吗？

todo示例的视频结束时，演讲者提到（a）添加按钮以删除整个列表（b）添加控件以允许用户更改列表中项目的顺序

---

有人做了这些改进吗？如果是的话，你介意分享吗？我很想通过比较变更集开始我的meteor之路。

因此，我得到了一份Todo工作副本，因为它一点都不琐碎，对于第一次使用meteor的人来说，为了做到这一点，我将记录我遇到的主要障碍，以及如何克服它

首先，我使用“meteor create--example todo”来下拉todo示例

然后，（我的障碍的第一个根本原因——过度思考）我开始了一个新项目，使用“meteor create projectname”而不是仅仅对其进行黑客攻击

然后，我将3个目录的文件复制到新项目中——“客户机”、“公共”和“服务器”

我立即开始对这些文件进行黑客攻击（造成我的障碍的第二个根本原因——没有采取初步措施），当我进行测试时，几乎成功了

最初的渲染工作，mongo db的东西是金色的，双击让我编辑东西。。。但是“选择”不起作用。即，用于选择列表项的on mousedown处理程序不会选择它

我添加了一些alert（）调用，最后得知“Router”为null！我决定把重点放在我所做的改变之外，看看这是不是更基本的东西

我检查了javascript控制台的错误，果然有一个很大的错误：主干未定义

检查示例“todo”项目“meteor list--using”告诉我： 强调 骨干

…而在我的新项目中，同样的命令告诉我没有使用任何可用的包

---

当我添加下划线和主干线时，我的todo副本开始正常工作。

因此，我得到了一份todo副本，由于它一点都不平凡，对于第一次使用meteor的人来说，为了做到这一点，我将记录我遇到的主要障碍，以及如何克服它

首先，我使用“meteor create--example todo”来下拉todo示例

然后，（我的障碍的第一个根本原因——过度思考）我开始了一个新项目，使用“meteor create projectname”而不是仅仅对其进行黑客攻击

然后，我将3个目录的文件复制到新项目中——“客户机”、“公共”和“服务器”

我立即开始对这些文件进行黑客攻击（造成我的障碍的第二个根本原因——没有采取初步措施），当我进行测试时，几乎成功了

最初的渲染工作，mongo db的东西是金色的，双击让我编辑东西。。。但是“选择”不起作用。即，用于选择列表项的on mousedown处理程序不会选择它

我添加了一些alert（）调用，最后得知“Router”为null！我决定把重点放在我所做的改变之外，看看这是不是更基本的东西

我检查了javascript控制台的错误，果然有一个很大的错误：主干未定义

检查示例“todo”项目“meteor list--using”告诉我： 强调 骨干

…而在我的新项目中，同样的命令告诉我没有使用任何可用的包

当我添加下划线和主干线时，我的todo副本开始正常工作。

我在Meteor.com的“todo”示例中创建了“删除列表”函数

警告：当用户单击“删除列表”图标时，没有警告或警报。可能应该有。下一步我会这样做。：-）

“删除列表”功能导致删除所有关联的TODO。另一种实现可能会选择性地将这些未关联的TODO保留到“未命名列表”中。练习留给读者

享受

艾伦S

下面是补丁的要点，然后是三个受影响文件的单独补丁：todos.js、todos.css、todos.html

todos.js todos.html

——todos orig/client/todos.html 2013-04-19 23:05:05.418783039-0700
+++todos/client/todos.html 2013-04-19 21:10:28.576711844-0700
@@ -29,6 +29,7 @@
{{else}
+           
{{name}}

我在Meteor.com的“Todos”示例中创建了“删除列表”函数

警告：当用户单击“删除列表”图标时，没有警告或警报。可能应该有。下一步我会这样做。：-）

“删除列表”功能导致删除所有关联的TODO。另一种实现可能会选择性地将这些未关联的TODO保留到“未命名列表”中。练习留给读者

享受

艾伦S

下面是补丁的要点，然后是三个受影响文件的单独补丁：todos.js、todos.css、todos.html

todos.js todos.html

——todos orig/client/todos.html 2013-04-19 23:05:05.418783039-0700
+++todos/client/todos.html 2013-04-19 21:10:28.576711844-0700
@@ -29,6 +29,7 @@
{{else}
+           
{{name}}

我添加了两个新功能，可以将它变成一个时间跟踪器：

• 记录和显示每个待办事项的完成时间戳
• 时间跟踪——当你在做某件事情时，点击“活动”，然后它会计算并显示你在该项目上花费的时间

---

我添加了两个新功能，可以将它变成一个时间跟踪器：

• 记录和显示每个待办事项的完成时间戳
• 时间跟踪——当你在做某件事情时，点击“活动”，然后它会计算并显示你在该项目上花费的时间

---

因此，基于对此没有任何反馈，我已承诺只进行深入攻击。我已创建了删除列表功能。这是一个“补丁”（

diff-ru-todos-orig-todos

）。那么，巴斯

--- todos-orig/client/todos.js  2013-04-19 23:05:05.422782896 -0700
+++ todos/client/todos.js       2013-04-19 23:00:57.571651600 -0700
@@ -93,6 +93,23 @@
     // prevent clicks on <a> from refreshing the page.
     evt.preventDefault();
   },
+  'click .destroy': function (evt) { // delete list
+    var list_id = this._id;
+    // remove todos attached to this list
+    Todos.find({list_id: list_id}).
+         forEach(function (todo) { 
+           Todos.remove(todo._id);
+         });
+    // remove the list
+    Lists.remove(list_id);
+    Session.set("list_id", null);
+    var list = Lists.findOne({}, {sort: {name: 1}});
+    if (list) {
+      Router.setList(list._id);
+      Session.set("list_id", list._id);
+    }
+    Deps.flush();
+  },
   'dblclick .list': function (evt, tmpl) { // start editing list name
     Session.set('editing_listname', this._id);
     Deps.flush(); // force DOM redraw, so we can focus the edit field

--- todos-orig/client/todos.css 2013-04-19 23:05:05.422782896 -0700
+++ todos/client/todos.css      2013-04-19 23:31:40.682096634 -0700
@@ -121,6 +121,11 @@

 #lists .list {
     padding: 3px 6px;
+    display: block;
+    height: 30px;
+    position: relative;
+    overflow: hidden;
+    /*border-top: 1px solid #ccc;*/
 }

 #lists .selected {
@@ -129,10 +134,22 @@
     font-weight: bold;
 }

-#lists .list-name {
+#lists .list .destroy {
     cursor: pointer;
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    height: 20px;
+    width: 20px;
+}
+
+#lists .list-name {
     color: black;
+    cursor: pointer;
+    float: left;
+    margin-left: 30px;
     text-decoration: none;
+    width: auto;
 }

 #createList {
@@ -201,11 +218,13 @@
     color: #999;
 }

-#item-list .todo:hover .destroy {
+#item-list .todo:hover .destroy, 
+#lists .list:hover .destroy {
     background: url('/destroy.png') no-repeat 0 0;
 }

-#item-list .todo .destroy:hover {
+#item-list .todo .destroy:hover,
+#lists .list .destroy:hover {
     background-position: 0 -20px;
 }

--- todos-orig/client/todos.html        2013-04-19 23:05:05.418783039 -0700
+++ todos/client/todos.html     2013-04-19 21:10:28.576711844 -0700
@@ -29,6 +29,7 @@
               <input class="list-name-input" id="list-name-input" type="text" value="{{name}}" />
             </div>
           {{else}}
+           <div class="destroy"></div>
             <div class="display">
               <a class="list-name {{name_class}}" href="/{{_id}}">
                 {{name}}