0

バックボーンで最初のアプリケーションを実行していますが、イベントをアタッチしようとすると奇妙なことが起こります。

私はこれまでにこのコードを入手しました：

//View for @girl, EDIT action
GirlEditView = Backbone.View.extend({
    initialize: function(el, attr) {
        this.variables = attr;
        console.log(attr);
        this.render();
    },
    render: function() {
        var template = _.template( $("#girl_edit").html(), this.variables );
        $(this.el).html( template );
        $("#edit_girl").modal('show');
    }
});

//View for @girl
GirlView = Backbone.View.extend({
    initialize: function(el, attr) {
        this.variables = attr;
        this.render();
    },
    render: function() {
        var template = _.template( $("#girl_template").html(), this.variables );
        $(this.el).html( $(this.el).html() + template );
    },
    events: {
        "click p.modify": "modify"
    },
    modify: function() {
        //calls to modify view
        new GirlEditView({el : $("#edit_girl")}, this.variables);
    }
});


//One girl from the list
Girl = Backbone.Model.extend({
    initialize: function() {
        this.view = new GirlView({el : $("#content")}, this.attributes );
    }
});

//all the girls
Girls = Backbone.Collection.extend({
    model: Girl,
});




//do magic!
$(document).ready(function() {

    //Underscore template modification
    _.templateSettings = {
        escape : /\{\[([\s\S]+?)\]\}/g,
        evaluate : /\{\[([\s\S]+?)\]\}/g,
        interpolate : /\{\{([\s\S]+?)\}\}/g
    }

    //get initial data and fill the index
    var list = [];
    $.getJSON('girls.json', function(data) {
        list = [];
        $.each(data, function(key, val) {
            list.push( new Girl(val) );
        });

        var myGirls = new Girls(list);
        console.log( myGirls.models);
    });
});

ご覧のように。

私はすべての女の子を保存するためにコレクションを使用しており、データはルビーのRESTAPIから取得されます。

各女の子は新しいモデルインスタンスを作成し、その中にビューインスタンスをアタッチしました。

それが良い習慣かどうかはわかりませんが、それを行うためのより良い方法を考えることはできません。

各ビューは、一意のIDを持つコンテンツを作成します。girl-1girl-2そして続けます。

これで、テンプレートに編集ボタンがあります。私の最初のアイデアは、onclickイベントを攻撃し、編集ビューをトリガーしてレンダリングすることです。

それは期待どおりに機能しています。

これまでの問題は次のとおりです。

イベントがトリガーされると、レンダリングされたビューを「所有」するものではなく、すべてのコレクション（女の子）が編集ビューを起動します。

私の質問は私が間違っていることですか？

どうもありがとう

4

1 に答える 1

4

すべてのGirlViewが同じものを使用しているため、すべての編集ビューが表示されますel。

this.view = new GirlView({el : $("#content")}, this.attributes );

次に、さらにHTMLを追加してレンダリングします。

render: function() {
    var template = _.template( $("#girl_template").html(), this.variables );
    $(this.el).html( $(this.el).html() + template );
}

delegateバックボーンイベントは、ビューのを使用してバインドされますel。したがって、複数のビューが同じを共有する場合、同じDOM要素にel複数delegateのがアタッチされ、イベントは混乱を招きます。

モデルにはビューがなく、ビューはモデルとコレクションを監視し、それらのイベントに応答します。これはドキュメントに表示されます：

コンストラクター/初期化 new View([options])

[...]渡された場合、ビューに直接アタッチされるいくつかの特別なオプションがあります：、、model[ collection...]

通常、コレクションを作成し、c次にそのコレクションを渡してビューを作成します。

var v = new View({ collection: c })

または、モデルを作成してmから、そのモデルをラップしたビューを作成します。

var v = new View({ model: m })

次に、ビューはコレクションまたはモデルのイベントにバインドされ、基になるデータの変更に応じて表示を更新できるようになります。ビューはバックボーンのコントローラーとしても機能し、ユーザーアクションをモデルまたはコレクションに転送します。

初期化は次のようになります。

$.getJSON('girls.json', function(data) {
    $.each(data, function(key, val) {
        list.push(new Girl(val));
    });

    var myGirls = new Girls(list);
    var v       = new GirlsView({ collection: myGirls });
});

次にGirlsView、コレクションをスピンして、GirlViewモデルごとに個別のを作成します。

var _this = this;
this.collection.each(function(girl) {
    var v = new GirlView({ model: girl });
    _this.$el.append(v.render().el);
});

次に、次のGirlViewようにレンダリングします。

// This could go in initialize() if you're not certain that the
// DOM will be ready when the view is created.
template: _.template($('#girl_template').html()),
render: function() {
    this.$el.html(this.template(this.model.toJSON());
    return this;
}

elその結果、モデルごとの各ビューには、イベントをローカライズするための独自の個別のビューがあります。これにより、GirlViewの追加と削除も非常に簡単になります。これは、すべてが独自にうまくまとめられているためelです。

于 2012-05-19T23:57:10.693 に答える