4

Backbone.js 初心者向けの完全な質問です。私は ToDo Backbone.js の例に基づいて、かなり単純な単一のアプリ インターフェイスを構築しようとしています。todo プロジェクトはユーザー入力に重点を置いていますが、このアプリはユーザー オプション (クリック イベント) に基づいてデータをフィルタリングすることに重点を置いています。

私は Backbone.js と Mongoose にまったく慣れていないため、私がやろうとしていることの良い例を見つけることができませんでした。API を使用して MongoDB コレクションからデータを取得し、アプリでレンダリングする Backbone.js コレクションにドロップすることができました。私の人生でできないことは、そのデータをフィルタリングしてアプリビューを再レンダリングする方法です。ドキュメントの「タイプ」フィールドでフィルタリングしようとしています。

これが私のスクリプトです：

(私はいくつかの主要なリファクタリングが必要であることを完全に認識しています。私は概念のラピッド プロトタイピングを行っているだけです。)

$(function() {

    window.Job = Backbone.Model.extend({
        idAttribute: "_id",

        defaults: function() {
            return {
                attachments: false
            }
        }
    });

    window.JobsList = Backbone.Collection.extend({
        model: Job,
        url: '/api/jobs',
        leads: function() {
            return this.filter(function(job){ return job.get('type') == "Lead"; });
        }
    });

    window.Jobs = new JobsList;

    window.JobView = Backbone.View.extend({
        tagName: "div",
        className: "item",
        template: _.template($('#item-template').html()),
        initialize: function() {
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.remove, this);
        },
        render: function() {
            $(this.el).html(this.template(this.model.toJSON()));
            this.setText();
            return this;
        },
        setText: function() {
            var month=new Array();
            month[0]="Jan";
            month[1]="Feb";
            month[2]="Mar";
            month[3]="Apr";
            month[4]="May";
            month[5]="Jun";
            month[6]="Jul";
            month[7]="Aug";
            month[8]="Sep";
            month[9]="Oct";
            month[10]="Nov";
            month[11]="Dec";

            var title = this.model.get('title');
            var description = this.model.get('description');
            var datemonth = this.model.get('datem');
            var dateday = this.model.get('dated');
            var jobtype = this.model.get('type');
            var jobstatus = this.model.get('status');
            var amount = this.model.get('amount');
            var paymentstatus = this.model.get('paymentstatus')

            var type = this.$('.status .jobtype');
            var status = this.$('.status .jobstatus');

            this.$('.title a').text(title);
            this.$('.description').text(description);
            this.$('.date .month').text(month[datemonth]);
            this.$('.date .day').text(dateday);
            type.text(jobtype);
            status.text(jobstatus);

            if(amount > 0)
                this.$('.paymentamount').text(amount)

            if(paymentstatus)
                this.$('.paymentstatus').text(paymentstatus)

            if(jobstatus === 'New') {
                status.addClass('new');
            } else if (jobstatus === 'Past Due') {
                status.addClass('pastdue')
            };

            if(jobtype === 'Lead') {
                type.addClass('lead');
            } else if (jobtype === '') {
                type.addClass('');
            };
        },
        remove: function() {
            $(this.el).remove();
        },
        clear: function() {
            this.model.destroy();
        }
    });

    window.AppView = Backbone.View.extend({
        el: $("#main"),
        events: {
            "click #leads .highlight" : "filterLeads"
        },
        initialize: function() {
            Jobs.bind('add', this.addOne, this);
            Jobs.bind('reset', this.addAll, this);
            Jobs.bind('all', this.render, this);

            Jobs.fetch();
        },
        addOne: function(job) {
            var view = new JobView({model: job});
            this.$("#activitystream").append(view.render().el);
        },
        addAll: function() {
            Jobs.each(this.addOne);
        },
        filterLeads: function() {
            // left here, this event fires but i need to figure out how to filter the activity list.
        }
    });

    window.App = new AppView;

});
4

1 に答える 1

5

「リード」フィルターの結果でコレクションをリセットしようとしましたか?

何かのようなもの

window.AppView = Backbone.View.extend({
    el: $("#main"),
    events: {
        "click #leads .highlight" : "filterLeads"
    },
    initialize: function() {
        Jobs.bind('add', this.addOne, this);
        Jobs.bind('reset', this.render, this); //render on reset

        Jobs.fetch(); //this triggers reset
    },
    addOne: function(job) {
        var view = new JobView({model: job});
        this.$("#activitystream").append(view.render().el);
    },
    //add a render function
    render: function() {
        this.$("#activitystream").empty(); //empty out anything thats in there

        Jobs.each(this.addOne);
    },
    filterLeads: function() {
        Jobs.reset(Jobs.leads()); //reset Jobs with only the leads
    }
});

また、AppView には「render」メソッドがありませんが、ここで参照します。

Jobs.bind('all', this.render, this);
于 2012-06-08T22:06:35.327 に答える