0

我必须使用backbone.js 创建事件。下面是我的js 代码

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>

我点击显示按钮时的 o/p 是 Display // 这是一个按钮//

Sinduja E808514 HPS

沙里尼 E808130 HBS

普里亚 E808515 HSG

现在从视图中，我必须将更改事件绑定到模型。模型中的更改必须在视图上触发，才能在单击显示按钮时显示输出。

4

2 回答 2

1

这并不能完全回答您的问题，但是：

如果受训者（我已将其重命名为受训者）是一个集合，您应该使用以下方法设置它：

new TraineeView({collection: trainees});

然后在渲染中：

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

而且您可能不想将调用移动到视图之外，也许在路由器中：

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

这样你的视图只听模型。

您还应该将绑定部分移动到视图初始化方法

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

希望这可以帮助。

于 2013-02-20T07:30:01.530 回答
0 
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});                
     });
于 2013-02-20T06:56:30.290 回答