Question

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

有没有人做过这些改进？如果是这样，你介意分享吗？我喜欢通过比较变化集来跳入流星。

Answer 1

所以，我得到了Todo工作的副本，因为对于使用流星的第一个计时器来说，这并不是一件轻而易举的事情，我会记录我遇到的主要障碍，以及如何获得在它上面。

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

然后，（我的障碍的第一个根本原因 - 过度思考）而不仅仅是黑客攻击，我使用“meteor create projectname”启动了一个新项目

然后我将3个目录的文件复制到新项目中 - “client”，“public”和“server”。

我立即开始攻击文件（我的障碍的第二个根本原因 - 不采取婴儿步骤），当我测试时，它几乎可以工作。

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

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

我检查了javascript控制台是否有错误，果然有一个很大的问题：Backbone未定义。

检查示例“todo”项目，“meteor list --using”告诉我：下划线骨干

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

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

Answer 2

我在Meteor.com“Todos”示例中创建了“删除列表”功能。

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

“删除列表”功能会删除所有关联的待办事项。另一种实现方式可以选择将这些不相关的Todos保留在“未命名的列表”中。练习留给读者。

享受

Alan S。

以下是补丁的要点，然后是三个受影响文件的各个补丁：todos.js，todos.css，todos.html。

https://gist.github.com/aks/fd8b1fad8b583be24af1

todos.js

--- 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.css

--- 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.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 @@
               <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}}

Answer 3

我添加了两个新功能in my github repo，将其转变为时间跟踪器：

记录并显示每个待办事项的完成时间戳。
时间跟踪 - 当您处理某些内容时，您点击“有效”，然后它会计算并显示您在该项目上花费的时间。

有人在改进todo示例吗？

3 个答案:

todos.js

todos.css

todos.html