jquery - Backbone 为待办事项列表创建另一个 View 教程

Question

以下示例完美运行 ( http://jsfiddle.net/WmsnR/1/ )。这是一个 super 基本的待办事项列表，完全没有风格。这是我第一次尝试 Backbone ，我是根据教程构建的。一位高级开发人员告诉我，也许我应该为每个 li 创建另一个 View ，以便我可以在需要时附加不同的事件。那么我怎样才能构建另一个与我之前所做的 View 相关的 View 呢？

我尝试过类似以下的方法，但没有成功:

        var Item = Backbone.View.extend({

            events: {
              'click span': 'deleteTask'
            },  

            deleteTask: function(evt){
                var task = $(evt.currentTarget).closest('li');
                task.remove();
            }       

        });

                   var item = new Item();

Answer 1

您必须记住为调用列表中的每个模型添加 View 。

整体架构看起来有点像这样:

+------------------+
| Parent List View |
|  +-----------+   |
|  | Item View |   |
|  +-----------+   |
|  +-----------+   |
|  | Item View |   |
|  +-----------+   |
+------------------+

父 ListView 将是一个容器 View ，列出每个项目，为每个项目创建一个 View 。

因此，父列表的渲染看起来像这样:

     render: function () {

        // Sort and render each item, starting with a depth of zero.
        _.each(listOfModels,
            function (item) {
                var view = new ItemView({model:item});
                $(this.el).append(view.render().el);
            }, this);

        return this;
    },

这只是粗略的想法。

查看 update to the JSFiddle具体实现思路。