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
},

我遇到的问题是：

我想将两种不同类型的模型（清单项目和清单标签）添加到同一模型（清单）中，并且任何一种都会触发两个“添加”事件。为了防止这种情况，我必须根据用户输入的方式设置addsItem标志，但我觉得这样做的方法很糟糕
我隐约知道你可以拥有＆lt;％=％＆gt; HTML中的块加载模型而不是以老式的方式附加在HTML上;我也将使用Underscore模板（在我的index.html页面中有这个东西）但是因为我需要为每个项目/标签模型使用不同的id，所以我不知道如何解决这个问题
由于上述问题或其他一些我不知道的问题，我无法使用Backbone-localStorage来获取（）清单集合并在刷新时呈现它，尽管我可以使用Chrome Javascript控制台

P.S。完整代码为here，我根据Backbone Todo example编写。

谢谢

Answer 1

我明白你要做什么，我会逐一回答你的疑惑。

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

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

您也可以使用下划线模板功能使您的ID动态化。您所要做的就是为id添加模板变量，并在处理并生成动态ID后给出值。
使用两个单独的集合，您应该能够在每个集合上使用fetch方法并呈现数据。

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

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

1 个答案: