1

私はJavascriptとバックボーンに比較的慣れていません。シンプルな初心者レベルのバックボーン アプリをハッキングしています。Home と NewEntry の 2 つのビューがあります。[ホーム] から [新しいエントリ] をクリックして、NewEntry をレンダリングします。NewEntry から、[キャンセル] をクリックして Home をレンダリングします。そこで、それぞれ「キャンセル」と「新規エントリ」をクリックして、Home と NewEntry を切り替えたいと思います。

しかし、うまくいきません。これは私がやろうとしていることです:

  1. ホームで、「新しいエントリ」をクリックします。NewEntry は適切にレンダリングされます。
  2. NewEntry で、[キャンセル] をクリックします。ホームは適切にレンダリングされます。
  3. ホームで、「新しいエントリ」をクリックします。NewEntry が再び適切にレンダリングされるようになりました。
  4. NewEntry で、[キャンセル] をクリックします。ホームはレンダリングされません。クリック イベントに関連付けられたメソッドは、2 回目の起動はしません。

私は非常に困惑しています！理由がわかりません。別のイベントが発生しているかどうかを調べたいのですが、方法がわかりません。私が何をすべきか知っている人はいますか？

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 に答える