1

我对 Javascript 和骨干网比较陌生。我正在开发一个简单的初学者级骨干应用程序。我有两个视图：Home 和 NewEntry。在 Home 中，我单击“新条目”以呈现 NewEntry。在 NewEntry 中，我单击“取消”以呈现主页。所以，我想分别点击“取消”和“新条目”在 Home 和 NewEntry 之间切换。

但是，它不起作用。这就是我尝试做的事情：

  1. 在主页上，单击“新条目”。NewEntry 正确呈现。
  2. 在 NewEntry 上，单击“取消”。家庭渲染正确。
  3. 在主页上，单击“新条目”。NewEntry 再次正确呈现。
  4. 在 NewEntry 上，单击“取消”。主页不呈现。与 click 事件关联的方法不会再次触发。

我非常难过！我不知道为什么。我想知道是否有不同的事件正在触发，但我不知道如何。有人知道我应该怎么做吗？

JavaScript：

var Views = {
    Home: Backbone.View.extend({
        template: $('#homeview-template').template(),
        initialize: function() {
            this.entries = new Collections.Entries();
            this.entries.on('all', this.render, this);
            this.entries.fetch();
        },
        render: function() {
            var currDate = getCurrentDate();
            var innerHtml = $.tmpl(this.template, {
                currDate: currDate
            });
            this.$el.html(innerHtml);
            return this;
        }
    }),

    NewEntry: Backbone.View.extend({
        template: $('#newentryview-template').template(),
        events: {
            'click button#cancel-new-entry': 'cancelNewEntry',
            'all': 'logEvents'
        },
        initialize: function() {
            // currently, do nothing
        },
        render: function() {
            var innerHtml = $.tmpl(this.template);
            this.$el.html(innerHtml)
            return this;
        },
        cancelNewEntry: function() {
            console.log("test 1");
            window.router.showHome();
        },
        logEvents: function(evnt) {
            console.log("works");
            console.log("event", evnt);
        }
    })
};

var Router = Backbone.Router.extend({
    initialize: function(inputs) {
        this.homeView = new Views.Home();
        this.newEntryView = new Views.NewEntry();
        this.el = inputs.el
    },

    routes: {
        "": 'showHome',
        "#": 'showHome',
        'new': 'writeNewEntry'
    },
    showHome: function() {
        this.el.empty();
        this.navigate("");
        this.el.append(this.homeView.render().el);
    },
    writeNewEntry: function() {
        this.el.empty();
        this.navigate('new');
        this.el.append(this.newEntryView.render().el);
    }
});

HTML： 


<script id='homeview-template' type='text/template'>
<h1 class='title'>My Journal</h1>
<div id='curr-date-new-entry'>
<div id='curr-date'>${currDate}</div>
<div id='new-entry'>
<a href='#/new'>New Entry</a>
</div>
</div>
</script>
<script id='newentryview-template' type='text/template'>
<h1 class='title'>New Entry</h1>
<input id='new-entry-title' placeholder='New entry title' type='text'/>
<input id='new-entry-body' placeholder='New entry content' type='text'/>
<button id='submit-new-entry'>Submit</button>
<button id='cancel-new-entry'>Cancel</button>
</script>

4

1 回答 1

0

这可能会解决您的问题：

writeNewEntry: function() {
    this.el.empty();
    this.navigate('new');
    this.el.append(this.newEntryView.render().el);
    //fix: http://backbonejs.org/#View-delegateEvents
    this.newEntryView.delegateEvents();
}

但是，如果您不重用视图，我建议您直接在方法 writeNewEntry 上实例化视图而不是初始化，这样您就不需要手动调用 delegateEvents：

writeNewEntry: function() {
    this.el.empty();
    this.navigate('new');
    this.newEntryView = new Views.NewEntry();
    this.el.append(this.newEntryView.render().el);
}
于 2012-10-01T18:58:43.153 回答