meteor - 有人致力于改进 todo 示例吗？

Question

待办事项示例的视频以演讲者提到 (a) 添加按钮以删除整个列表 (b) 添加控件以让用户更改列表中项目的顺序结束。

有人做过这些改进吗？如果是这样，你介意分享吗？我很想通过比较变更集来开始进入流星。

Answer 1

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

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

然后，（我的障碍的第一个根本原因 - 过度思考）而不是仅仅破解它，我使用“meteor create projectname”开始了一个新项目

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

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

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

我添加了一些 alert() 调用，最后得知“Router”为空！我决定专注于我所做的改变之外，看看它是否不是更基本的东西。

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

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

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

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

Answer 2

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

警告：当用户单击“删除列表”图标时，没有警告或警报。应该有吧。接下来我会这样做。:-)

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

享受

艾伦·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

我在我的 github 存储库中添加了两个新功能，将其变成了时间跟踪器：

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