0

これが私の状況です。「質問」コレクション内に「質問」モデルがたくさんあります。

質問コレクションは、SurveyBuilder ビューによって表されます。

質問モデルは、QuestionBuilder ビューによって表されます。

したがって、基本的に QuestionBuilder ビューの UL があります。UL には jQuery ソート可能ファイルが添付されています (質問を並べ替えることができます)。問題は、並べ替えが完了したら、モデルの変更された「question_number」を更新して、その位置を反映したいということです。

Questions コレクションには「question_number」のコンパレータがあるため、コレクションをソートする必要があります。ここで、UL の .index() に question_number を反映させる方法が必要です。何か案は？

別の問題は、質問を削除することです。すべての質問番号を更新する必要があります。今、私はそれを使用して処理します：

var deleted_number = question.get('question_number');
var counter = deleted_number;
var questions = this.each(function(question) {
    if (question.get('question_number') > deleted_number) {
        question.set('question_number', question.get('question_number') - 1);
    }
});
if (this.last()) {
    this.questionCounter = this.last().get('question_number') + 1;
} else {
    this.questionCounter = 1;
}

しかし、それを行うにはもっと簡単な方法が必要なようです。

理想的には、コレクションで remove が呼び出されるか、ビュー内の UL で sortstop が呼び出されるたびに、各 QuestionuBuilder ビューの .index() を取得し、そのモデルの question_number を .index() + 1 に更新し、save( ）。

4

2 に答える 2

2

これを行う方法は複数ありますが、Backbone Events を使用します。ユーザーがソートの完了などをクリックしたとき、N 秒間ソートされていないとき、または などの jQuery のソート可能なイベントを使用して各ソートが発生したときに、イベントを発行しsortます。内のイベントをリッスンしv.SurveyBuilderます。

次に、このようなことをします。明らかにテストされていませんが、比較的簡単にアクセスできるはずです。Update、これは削除も処理する必要があります。これは、以前のものは気にせず、現在のものだけを気にするためです。削除を処理してから、このイベントをトリガーします。Update 2、最初の例は良くありませんでした。頭の中でコーディングするのはこれで終わりです。cidのdata-cid属性にモデルを挿入するには、ビューを変更する必要がありますli。.get次に、コレクションのメソッドを使用して正しいモデルを更新できます。複数のアプローチがあると言ったように、あなたはあなた自身の答えを見つけたようです。

v.SurveyBuilder = v.Page.extend({
    template: JST["app/templates/pages/survey-builder.hb"],
    initialize: function() {
        this.eventHub = EventHub;
        this.questions = new c.Questions();
        this.questions.on('add', this.addQuestion, this);

        this.eventHub.on('questions:doneSorting', this.updateIndexes)
    },
    updateIndexes: function(e) {
        var that = this;
        this.$('li').each(function(index) {
            var cid = $(this).attr('data-cid');
            that.questions.get(cid).set('question_number', index);
        });
    }
于 2012-12-21T16:16:00.073 に答える
0

方法を思いつきました！！！

  1. SurveyBuilder ビューの親ビューの下に子ビューの配列を作成します (私の例では、this.qbViews は QuestionBuilder ビューの配列を維持します)。
  2. コレクション (私の場合は this.questions) に対して、 to を使用してremoveイベントを設定します。つまり、this.questions から何かが削除されるたびに実行されます。onupdateIndexesupdateIndexes
  3. 親ビューのオブジェクトに、ソート可能なオブジェクト (私の場合、これは questionBuilder ビューを保持する UL)eventsのイベントを追加して、sortstopstartstop .question-buildersupdateIndexes

  4. でupdateIndexes、次のことを行います。

    updateIndexes: function(){
    //Go through each of our Views and set the underlying model's question_number to 
    //whatever the index is in the list + 1
    _.each(this.qbViews, function(qbView){
        var index = qbView.$el.index();

        //Only actually `set`s if it changed
        qbView.model.set('question_number', index + 1);
    });
},

そして、SurveyBuilder ビューの完全なコードがあります。

v.SurveyBuilder = v.Page.extend({
    template: JST["app/templates/pages/survey-builder.hb"],
    initialize: function() {
        this.qbViews = []; //will hold all of our QuestionBuilder views

        this.questions = new c.Questions(); //will hold the Questions collection
        this.questions.on('add', this.addQuestion, this); 
        this.questions.on('remove', this.updateIndexes, this); //We need to update Question Numbers
    },
    bindSortable: function() {
        $('.question-builders').sortable({
            items: '>li',
            handle: '.move-question',
            placeholder: 'placeholder span11'
        }); 
    },
    addQuestion: function(question) {
        var view = new v.QuestionBuilder({
            model: question
        });

        //Push it onto the Views array
        this.qbViews.push(view);

        $('.question-builders').append(view.render().el);
        this.bindSortable();
    },
    updateIndexes: function(){
        //Go through each of our Views and set the underlying model's question_number to 
        //whatever the index is in the list + 1
        _.each(this.qbViews, function(qbView){
            var index = qbView.$el.index();

            //Only actually `set`s if it changed
            qbView.model.set('question_number', index + 1);
        });
    },
    events: {
        'click .add-question': function() {
            this.questions.add({});
        },
        //need to update question numbers when we resort
        'sortstop .question-builders': 'updateIndexes'
    } 
});

そして、完全なコードの Views ファイルへのパーマリンクは次のとおりです 。

于 2012-12-21T19:20:26.847 に答える