Backbone.js事件怀疑

Question

i have to create events using backbone.js.Below is my js code

var Trainee = Backbone.Model.extend();

            var TraineeColl = Backbone.Collection.extend({
                model: Trainee,
                url: 'name.json'
            });

            var TraineeView = Backbone.View.extend({
                el: "#area",




                template: _.template($('#areaTemplate').html()),

                render: function() {
                        this.model.each(function(good){
                        var areaTemplate = this.template(good.toJSON());
                        $('body').append(areaTemplate);
                    },this);

                    return this;
                }
            });

            var good = new TraineeColl();
            var traineeView = new TraineeView({model: good});
            good.fetch();


            good.bind('reset', function () {
            $('#myButtons').click(function() {
                traineeView.render();
                });
            });



<div class = "area"></div>
     <div class="button" id="myButtons">
<button class="firstbutton" id="newbutton">
   Display

</button>
</div>
    <script id="areaTemplate" type="text/template">
                 <div class="name">
                    <%= name %>
                </div>
                <div class="eid">
                    <%= eid %>
                </div>
                 <div class="subdomain">
                    <%= subdomain %>
                </div>

my o/p on clicking display button is Display // this is a button//

Sinduja E808514 HPS

Shalini E808130 HBS

Priya E808515 HSG

Now from the view i have to bind a change event to the model..the changes in the model must be triggered on the view to display the output on the click of display button.

Answer 1

This isn´t exactly answering your queston but:

if trainee (I've renamed it to trainees) is a collection you should set it using:

new TraineeView({collection: trainees});

Then in render:

this.collection.models.each(function(trainee)

And you propably wan´t to move the call to fetch outside the view, in the router perhaps:

trainees = new TraineeColl();
view = new TraineeView({collection: trainees});
trainees.fetch();

That way your view only listens to the model.

You also should move the bind part to the views initialize method

this.collection.bind('reset', function () {
                      this.render();
});

Hope this helps.

Answer 2

var TraineeView = Backbone.View.extend({
   el: "#area",

   initialize : function(options){            // you will get the passed model in   
//options.model
       var trainee = new TraineeColl();
       trainee.fetch();
       trainee.bind('reset change', this.render,this); //change will trigger render
// whenever any model in the trainee collection changes or is modified

    }

    template: _.template($('#areaTemplate').html()),

    render: function() {
           this.model.each(function(trainee){
           var areaTemplate = this.template(trainee.toJSON());
           $('body').append(areaTemplate);
           },this);

         return this;
     }
 });

 var traineeView = new TraineeView({model: trainee});                
     });