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

Posted 2023-05-09

技术标签:

【中文标题】Backbone.js 将两个不同的模型添加到同一个集合中【英文标题】：Backbone.js adding two different models to same collection 【发布时间】：2014-03-23 20:03:21 【问题描述】：

我是第一次用 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 编写。

谢谢

【问题讨论】：

【参考方案1】：

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

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

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