Question

这是我第二天尝试使用骨干而我完全迷失了。我正在学习本教程 - http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-3/

我所做的是加载一个联系人列表并将其呈现到屏幕上，但是如果你查看我的render1函数 - 这需要一个表单输入并将其附加到我的模板。问题是我创建后无法删除这些项目 - 其他项目可以删除。请帮忙吗？

      var ContactView = Backbone.View.extend({
    tagName: "contacts",
    className: "contact-container",
    template: $("#contactTemplate").html(),

    initialize: function(){
        this.model.on('change', this.render, this);
        this.model.on('add',    this.render1, this);
        this.model.on('destroy', this.remove, this);
    },

    events: {
        'click .deleteUser': 'delete'
    },

    test: function () {
        alert("here");
    },

    delete: function () {
        this.model.destroy();
    },

    render: function () {
        console.log(this);
        var tmpl = _.template(this.template);
        $(this.el).html(tmpl(this.model.toJSON()));
        temp = tmpl(this.model.toJSON());
        console.log(temp);
        return this;
    },
    render1: function () {
        console.log(this);
        var tmpl = _.template(this.template);
        temp = tmpl(this.model.toJSON());
        temp='<contacts class="contact-container">'+temp+'</contacts>';
        console.log(temp);
        $("#contacts").append(temp);
        $(this.el).html(tmpl(this.model.toJSON()));
        return this;
    }
});

var AddPerson = Backbone.View.extend({
    el: $("#addPerson"),
    // el: $("form/"),

    events: {
        'click': 'submit',
        'submit': 'submit'
    },

    submit: function(e) {
        // alert("here");
        e.preventDefault();
        this.collection = new Directory();
        // var data = (contacts[0]);
        var contact = new Contact(contacts[0]);
        var contactView = new ContactView({model: contact});
        this.collection.add(contact);
        this.collection.add(contactView);

    }
});

Answer 1

晕船，这段代码中有很多问题。

var contact = new Contact(contacts[0]);
var contactView = new ContactView({model: contact});
this.collection.add(contact);
this.collection.add(contactView);

Contact是一个Backbone.Model，但ContactView是一个Backbone.View。然而，你要添加到this.collection（我假设是Backbone.Collection的联系？）。看到这里的问题？在Backbone中，没有“视图集合”这样的概念。您只需获得一个概念：视图，它与模型相关联。

因此，在这里，您创建一个联系人，然后将其添加到集合中。就这些！它负责模型部分。需要使用事件和渲染来处理渲染部分。

当你将一个模型添加到一个集合（this.collection.add（contact））时，该集合将触发一个'add'事件，你可以使用.on来挂钩以创建一个新的ContactView并将其附加到DOM在某处。

所以当你写这个......

this.model.on('add',    this.render1, this);

你实际上在说'当联系人模型触发添加事件时，运行render1'，这不是你想要的，你可能想要的是collection.on（'add'，...）。该模型永远不会触发添加事件（好吧，你可以让它触发一个，但它不是预期的行为！），添加/删除事件是在集合级别。

换句话说，您在AddPerson视图中缺少对集合的某些绑定，以“响应”向集合中添加新的Contact。绑定到add事件的函数的代码应该看起来有点像：

onAdd: function(newContact){
  var newContactView = new ContactView({model: newContact});
  $("#contacts").append(newContactView.render().el);
}

您的代码中还有其他问题，但我想要采取的步骤大纲如下：

删除要在ContactView中添加的绑定：ContactView仅关注一个联系人，而不关心如何管理多个联系人。这可能就是为什么你只有一些（第一个？）联系人'工作'的问题
将该逻辑移至AddContact视图，该视图似乎更关注联系人集合。使用集合'add'事件创建新的ContactView并将它们附加到DOM

希望这有帮助！

Backbone.js - 删除视图

1 个答案: