Backbone.js 将两个不同的模型添加到同一个集合中

Question

我是第一次用 jQuery 和 Backbone.js 编写一个清单应用程序（新手），它允许用户创建标签和复选框项目，例如：

一些标签A

[ ] 复选框项目 1

一些标签B

[ ] 复选框项目 2

我想对代码进行一些批评，因为我觉得我做错了，它正在变成意大利面条，无法使用本地存储。

首先，在视图的初始化函数()中

this.listenTo(checklist, 'add', this.renderItem);
this.listenTo(checklist, 'add', this.renderLabel); 

然后，清单项的渲染函数之一：

renderItem: function(listItem) {
    if( !addingItem ) return;

    listItem.id = 'item' + checklist.length;
    var itemView = new ListItemView({model: listItem, id: listItem.id});

    // html to append
    listItem.htmlToAppend = '<input type="checkbox" id="' + listItem.id+ '"/><label for="'+ listItem.id + '">' + listItem.get('title') + '</label>';

    $(this.el).find('.list').append(listItem.htmlToAppend);
    listItem.existing = true;
    console.log(listItem.existing);
    $('[type="checkbox"]').checkboxradio(); // jQuery re-render
},

我遇到的问题是：

• 我想将两种不同类型的模型（清单项和清单标签）都添加到同一个模型（清单）中，任何一种都会触发两个“添加”事件。为了防止这种情况，我不得不根据用户输入的方式设置addingItem标志，但我觉得这是一种糟糕的方法

• 我隐约知道您可以在 HTML 中使用那些 块来加载模型，而不是以老式的方式附加到 HTML 上；我也打算使用 Underscore 模板（在我的 index.html 页面中有这个东西），但由于我需要为每个项目/标签模型使用不同的 id，我也不知道如何解决

  李>

• 由于上述问题或其他一些我不知道的问题，我无法使用 Backbone-localStorage 来 fetch() 清单集合并在刷新时呈现它，尽管我可以使用 Chrome Javascript 控制台查看该集合是否存在

附：完整代码是here，我根据Backbone Todo example 编写。

谢谢

Answer 1

我明白你的意思，我会一一解答你的疑惑。

1. 主干集合是模型的集合，其中每个模型必须相同，您不能在一个集合中添加两个不同的模型。 因此，您应该为每个模型创建一个单独的 backbonce 集合，并绑定事件侦听器，以便将两个集合上的事件添加到两个单独的函数中。

您可以使用由事件侦听器调用的通用函数来减少代码重复，并将要添加的集合名称和列表项作为参数传递给通用函数。

1. 您也可以使用下划线模板功能使您的 id 动态化。 您所要做的就是为 id 添加一个模板变量，并在处理并生成动态 id 后给出值。

2. 使用两个单独的集合，您应该能够对每个集合使用 fetch 方法并呈现数据。

我希望这些信息能有所帮助，很抱歉我无法提供任何代码示例，因为我是通过该网站的电话应用程序来回答这个问题的。 我会尽快添加代码块。