1

我正在尝试构建一个非常简单的 ul，其中您有一个输入框和添加按钮，单击添加按钮时，输入的文本将附加到 ul

这是我的代码：

HTML：

<body>
<input type="text" id="name">
<button id="add">Add</button>
<ul id="mylist"></ul>

JS：

$(function(){

var myCollection = Backbone.Collection.extend();

var myView = Backbone.View.extend({

    el:$('body'),

    tagName:'li',

    initialize : function(e){
        this.collection.bind("add",this.render,this);
    },

    events:{
        'click #add' : 'addfoo',
        'click .button':'removefoo'
    },

    addfoo:function(){
       var myname= $('#name').val();
       $('#name').val('');
       console.log('name entered: '+myname);
       this.collection.add({name:myname});
    },

    removefoo:function(){
             //need the code here 
    },

    render:function(){

        $('#mylist').empty();
        this.collection.each(function(model){
            $('#mylist').append('<li>'+model.get('name') + "<button class='button'>"+"delete"+"</button></li>");
        });

    }

});
var view = new myView({collection: new myCollection()});
    });

我的添加功能正在工作，但是当我单击删除按钮时，应该删除集合中的哪个模型，我卡在那里，请帮帮我。只需要代码，在 removefoo 函数中从集合中删除什么。

换句话说，单击按钮时如何获取要删除的模型

谢谢

4

2 回答 2

4

我认为您需要一种更加模块化的 Backbone 方法，让我解释一下。

Backbone 是一种组织代码的方式。只有一个 Backbone 视图就可以完成所有工作，并没有太大变化。

相反，请尝试查看您实际需要的视图：

  • 主视图
  • 列表显示
  • 列表项视图

MainView可能看起来像这样：

var MainView = Backbone.View.extend({

    el: 'body',

    initialize : function(options) {
       this.collection = new Backbone.Collection.extend({ url: '/items' });
    },

    events:{
    },

    render:function(){
        var listView = new ListView({ el: this.$("#myList") });
        listView.render();

        this.collection.fetch();

        return this;
    }
});

ListView

var ListView = Backbone.View.extend({

    tagName: 'ul',

    initialize : function(options) {
        _.bindAll(this, "render");

        this.collection.on("add", this.appendListItem, this);
    },

    events:{
    },

    render: function() {
        this.collection.each(this.appendListItem, this);

        return this;
    },

    appendListItem: function (model, collection, options) {
        var listItem = new ListItemView({ model: model});
        this.$el.append(listItem.render().el);
    }
});

ListItemView

var ListItemView = Backbone.View.extend({

    tagName: 'li',

    initialize : function(options) {
        _.bindAll(this, "render");

        this.model.on("destroy", this.remove, this);
    },

    events:{
        "click button": "delete"
    },

    render:function(){
        this.$el.text(this.model.get('name'));
        this.$el.append("<button class='button'>Delete</button>");

        return this;
    },

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

启动主视图：var view = new MainView().render();

于 2012-11-23T11:49:05.553 回答
0

当您在 UI 上渲染每个模型时，必须为每个li元素分配一个唯一的 id，以了解哪个元素被删除。

代替

$('#mylist').append('<li>'+model.get('name') + "<button class='button'>"+"delete"+"</button></li>");

你最好使用模板。您可以使用下划线的模板 ，这将更容易分配 id 和动态创建 lis。

要删除模型：

removefoo:function(evt){
        var target = evt.target;
        //Parse the target id to get the model id and then delete it.
    }

请参阅https://stackoverflow.com/questions/8782704/backbone-js-tutorial以了解骨干网的所有组件如何组合在一起。

于 2012-11-23T11:28:22.583 回答