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 がレンダリング コレクションとどのように連携するかについて、いくつかの仮定が行われます。バックボーンはコレクションのレンダリングを実装していないため、あなた次第です。最も簡単な方法は、コレクション内の各アイテムをレンダリングして DOM に追加することです。そのため、アイテムが削除されると、コレクション全体が再びレンダリングされます。悪いですね。実際には問題にならない場合があります。より複雑なレンダリング アプローチを実装することもできますが、基本から始めてそこから作業することをお勧めします。
  3. DOM はバックボーン (コレクション、モデル) の状態を反映する必要があります。DOM を直接操作することはできるだけ避け、バックボーンの状態の変更/イベントが 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 を直接使用する定型コードは面倒です。

于 2012-11-22T08:29:50.277 に答える