Question

背景

我在议程网络应用程序中工作，用户可以选择“日”，“周”和“月”视图。对于第一步，我创建了一个包含Scheduler对象的DayView，尽可能简单。所以，我已经开始使用这个html标记（忽略head部分只是为了澄清代码源）：

<body id="mjb-calendar">
    <div data-role="page" id="mjb-day-view">
        <div role="main" class="ui-content">
            <a class="test" href="#">Test</a>
        </div>
    </div>
</body>

我创建了day model模型，day view如下：

var Day = Backbone.Model.extend({
    defaults: {
        title: "Day"
    }
});

var DayView = Backbone.View.extend({
    el: '#mjb-day-view',
    events: {
        "click .test": 'test'
    },

    initialize: function() {
        _.bindAll(this, 'render');
        this.model = new Day();
        this.model.on('change', this.render);
    },
    test: function(){
        alert('test');
    },

    render: function() {
        console.log('day view rendered');
        return this;
    }
});

好的，请注意，单击元素.test时会触发一个事件。所以，继续进行测试：

$(document).ready(function(){
    var day = new DayView();
});

单击.test链接后，系统会正确提示警报。

好吧，为了使调度程序更灵活，我创建了如下：

var Scheduler = Backbone.Model.extend({
    defaults: {
        "view": new DayView()
    }
});

var SchedulerView = Backbone.View.extend({
    el: '#mjb-calendar',
    events: {},

    initialize: function(options) {

        _.bindAll(this, 'render');
        this.model = new Scheduler();
        this.render();
    },

    render: function() {
        this.model.get('view').render();
    }
});

请注意，我已将DayView声明为调度程序模型的属性（"view": new DayView()）。

问题

当我将调度程序视图初始化为...

时

$(document).ready(function(){
    var scheduler = new SchedulerView();
});

...为什么click .test事件不再被触发？

资产

下划线1.7.0
backbone 1.1.2
jquery 2.1.3

Answer 1

就像我在评论中提到的那样。代码应该可以工作。

http://jsfiddle.net/7mMGp/64/

 var Day = Backbone.Model.extend({
     defaults: {
         title: "Day"
     }
 });

 var DayView = Backbone.View.extend({
     el: '#mjb-day-view',
     events: {
         "click .test": 'test'
     },

     initialize: function() {
         _.bindAll(this, 'render');
         this.model = new Day();
         this.model.on('change', this.render);
     },
     test: function(){
         alert('test');
     },

     render: function() {
         console.log('day view rendered');
         return this;
     }
 });

 var Scheduler = Backbone.Model.extend({
     defaults: {
         "view": new DayView()
     }
 });

 var SchedulerView = Backbone.View.extend({
     el: '#mjb-calendar',
     events: {},

     initialize: function(options) {

         _.bindAll(this, 'render');
         this.model = new Scheduler();
         this.render();
     },

     render: function() {
         this.model.get('view').render();
     }
 });

 var schedulerView = new SchedulerView();

根据您输入的代码，您必须首先创建一个schedulerView实例。

然后schedulerView的{{1}}执行initialize，使new Scheduler()实例初始化。

所以程序流程是

schedulerView（主视图） - ＆gt; schedulerModel - ＆gt; DayView - ＆gt; DayModel

这不是好设计，但有效。

仅供参考，你可以这样做。

DayView

并在SchedulerView中，

var Days = Backbone.Collection.extend({
 model: Day
});
var days = new Days()
//add or modify the Collection

mainView（SchedulerView）使用render : function(){ days.each(function(dayModel){ new DayView({model : dayModel}).render(); }) return this }生成子视图（DayView）实例并调用他们的dayModel

简单的关系。

在模型的默认情况下声明视图时，不会触发事件

1 个答案: