Question

以下示例完美运行（http://jsfiddle.net/WmsnR/1/）。这是一个超级基本的待办事项列表，根本没有风格。这是我对骨干的第一次尝试，我已经根据教程构建了这个。高级开发人员告诉我，也许我应该为每个li创建另一个视图，以便我可以根据需要附加不同的事件。那么我怎样才能构建另一个与我以前做过的视图相关的视图呢？

我尝试了类似下面的内容，但它没有用：

        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

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

整体架构看起来像这样：

+------------------+
| Parent List View |
|  +-----------+   |
|  | Item View |   |
|  +-----------+   |
|  +-----------+   |
|  | Item 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了解具体的实施方案。

Answer 2

我认为高级开发人员的意思是拥有一个包装器视图，它将通过初始化和其他功能加载其他视图。

所以喜欢:(可怕的伪代码）

Master View{
     initialize: make item1
                 make item2
}

item1{}

item2{}

编辑：

我会尽可能评论，但我的排名不够高。

Backbone为待办事项列表教程创建另一个视图

2 个答案: