0

個人的なプロジェクトとして、backbone.js で食品計算を行っています。backbone.localstorage.js 経由で食品エントリを保存しています。私はそれのほとんどがうまく機能しています。私が抱えている唯一の問題は、アイテムを保存して更新を押した後、アイテムを削除できないことです。アイテムを追加すると、削除した直後に削除できます。

すべてを初期化する関数は次のとおりです。

initialize: function () {        
        this.model = new SearchList();
        this.foods = new AllFoods();
        this.journal = new FoodJournalDay();
        this.prepCollection = _.debounce(this.prepCollection, 1000);
        this.$totalcal = $('#totalcal span');
        this.$totalcalfat = $('#totalcalfat span');
        this.$totalprotein = $('#totalprotein span');
        this.$totalcarb = $('#totalcarb span');
        this.$totalfat = $('#totalfat span');
        this.$totalsugar = $('#totalsugar span');
        this.$totalsodium = $('#totalsodium span');
        this.$totalpotassium = $('#totalpotassium span');
        this.$list = $('#listing');
        this.$breakfast = $('#breakfast');
        this.$lunch = $('#lunch');
        this.$dinner = $('#dinner');
        this.$snack = $('#snack');
        this.$tracked = $('#tracked');

        this.listenTo(this.journal, 'all', _.debounce(this.render, 0));
        this.model.on('destroy', this.remove, this);
        this.listenTo(this.journal, 'destroy', this.renderfoods);        
        this.foods.fetch();        

        var myNotes = new FoodJournalDay();
        myNotes.fetch();

        myNotes.models.forEach(function(model){

            var mealli = model.get("html");

            var calcount = parseFloat(model.get("calories"));
            var proteincount = parseFloat(model.get("protein"));
            var carbscount = parseFloat(model.get("carbs"));
            var fatcount = parseFloat(model.get("fat"));
            var sugarcount = parseFloat(model.get("sugar"));

            totalcal += calcount;
            totalprotein += proteincount;
            totalcarb += carbscount;
            totalfat += fatcount;
            totalsugar += sugarcount;

            switch (model.get("meal")) {

                case 'Breakfast':
                    $('#breakfast').append(mealli);
                    break;
                case 'Lunch':
                        $('#lunch').append(mealli);
                    break;
                case 'Dinner':
                        $('#dinner').append(mealli);
                    break;
                case 'Snack':
                    $('#snack').append(mealli);
                    break;
                default:
                    //alert("Please select a meal!");
            }


            $('#totalcal span').html(totalcal);
            $('#totalprotein span').html(totalprotein);
            $('#totalcarb span').html(totalcarb);
            $('#totalfat span').html(totalfat);
            $('#totalsugar span').html(totalsugar);
        });
    },

ここに私の削除機能があります：

destroy: function (e) {
        var $li = $(e.currentTarget).closest('li');
        var id = $li.attr('data-id');
        $li.remove();

        console.log("li id: " + id);
        console.log(this.journal);

        this.journal.get(id).destroy();
    },

私が取り組んでいるものをいじりました： https://jsfiddle.net/brettdavis4/ynm2sse9/2/

ありがとう！

4

1 に答える 1

1

ラウンド 2 に戻ってきました :p.

ビューに 2 つの同一のコレクションを追加しました。1つに固執する必要があります。

もともとあなたはthis.journal = new FoodJournalDay();コレクションとして持っていました。そして、私の以前の回答ではthis.journal.get(id).destroy();、アイテムを正常に削除しました。ただし、新しいコードでは、別のコレクションを作成しましたvar myNotes = new FoodJournalDay();。FoodJournalDay()に既にコレクションが割り当てられているため、これはかなり無意味ですthis.journal。

を入力myNotesしたためfetch()、this.journal空のままにしました。は削除を行っているためthis.journal、 id のモデルを見つけようとしますthis.journal.get(id)。undefinedその を持つモデルがないため、これが返されますid。実際、コレクションにはモデルがまったくありません。そのため、エラー msg が表示されますCannot read property 'destroy' of undefined。

何かがうまくいかないときは、プログラムの流れに従って、console.log()どこにでもステートメントを配置して、コレクションやモデルの内容をチェックし、予期しない動作を検出できるかどうかを確認することをお勧めします。

https://jsfiddle.net/guanzo/1mq7mdm1/

交換しました

var myNotes = new FoodJournalDay();
myNotes.fetch();

myNotes.models.forEach(function(model){

これとともに。オリジナルコレクションを使用。

this.journal.fetch();
this.journal.models.forEach(function(model){
于 2016-03-11T00:45:36.427 に答える