0

我正在开发一个简单的应用程序来添加和删除 ul 中的名称。我有一个输入和一个按钮，当我单击按钮时，输入中的文本会附加到 ul。我的代码是：

<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>

<ul id="friends-list">
</ul>

骨干代码：

<script>
    $(function() {

        FriendList = Backbone.Collection.extend({
            initialize: function(){

                this.bind("add", function( model,options ){
                    var id = ( model.collection.indexOf(model) );
                    view.render(model,id);
                });
                this.bind("remove",function(model){
                    alert("here");
                });

            }
        });

        FriendView = Backbone.View.extend({

            tagName: 'li',

            events: {
                'click #add-input':  'getFriend',
                'click .button': 'removeFriend'
            },

            initialize: function() {
                this.friendslist = new FriendList;
                _.bindAll(this, 'render');
            },

            getFriend: function() {
                var friend_name = $('#input').val();
                this.friendslist.add( {name: friend_name} );

            },

            removeFriend: function(){
                var friend_index = $('.button').attr('id');
                alert(friend_index);

                this.friendslist.remove();
            },

            render: function( model,id ) {
                $("#friends-list").append("<li>"+ model.get("name")+"<button class=button id="+id+">"+"delete"+"</button>"+"</li>");

                $('#input').val('');

            }

        });

        var view = new FriendView({el: 'body'});
    });
</script>

我的问题，我卡在哪里：

i) 添加功能运行良好，当我单击删除按钮时，它会转到 removeFriend 功能，但不会转到集合和警报（“此处”）；ii) 请帮我写代码来删除/删除点击删除按钮的 li

谢谢

4

1 回答 1

2

Backbone 入门令人困惑。我从假设它可以做的比默认情况下更多的假设开始。相反，它是一个构建块（参见骨干木偶和类似项目）。考虑到这些事情，我对您的代码进行了一些重构：

  1. FriendView有太多的知识：它不应该知道将自己插入 DOM 的位置。
  2. 对 Backbone 如何处理渲染集合进行了一些假设。Backbone 不实现集合渲染，因此由您决定。最简单的方法是渲染集合中的每个项目并将它们附加到 DOM。所以当一个项目被移除时，整个集合会再次被渲染。听起来很糟糕，对吧？在实践中，这可能无关紧要。您可以实现更复杂的渲染方法，但我的建议是从基础开始并从那里开始工作。
  3. DOM 应该反映 Backbone 的状态（集合、模型）——您应该尽可能避免直接操作 DOM，并允许 Backbone 状态更改/事件直接更新 DOM。您可以在删除朋友的过程中看到这一点：从集合中删除朋友，这会触发集合remove上的事件，该事件绑定到渲染FriendListView.

那么如何修复你的代码呢？这就是我所做的：http: //jsfiddle.net/Gd2Rs/

$(function() {

    FriendList = Backbone.Collection.extend();

    FriendListView = Backbone.View.extend({
        initialize: function(e, c) {
            this.collection.bind('add', this.render, this);
            this.collection.bind('remove', this.render, this);
        },

        events: {
            'click #add-input':  'addFriend'
        },

        addFriend: function() {
            var friend_name = $('#input').val();
            $('#input').val('');
            this.collection.add({name: friend_name});
        },

        render: function() {
            var list = this.el.find('#friends-list');
            list.empty();
            this.collection.each(function(model) {
                var friendView = new FriendView({model: model});
                list.append(friendView.render().el);
            });
        }
    });

    FriendView = Backbone.View.extend({

        tagName: 'li',

        events: {
            'click .button': 'removeFriend'
        },

        removeFriend: function(){
            this.model.collection.remove(this.model);
        },

        render: function() {
            $(this.el).html(this.model.get('name') + "<button class='button'>"+"delete"+"</button>");
            return this;
        }
    });

    var view = new FriendListView({
        el: $('#friends'),
        collection: new FriendList()
    });
});​

请注意，我故意避免优化FriendListView.render，因为我认为使用 Backbone 是错误的方式。您将需要构建自己的集合渲染，您应该重复使用或使用骨干木偶之类的东西。使用 Backbone 的样板代码直接变得令人厌烦。

于 2012-11-22T08:29:50.277 回答