1

私はこのコードを持っています：

PageView.js

var PageView = Backbone.View.extend({
    events: {
         'click .unpublish': 'unpublish'
    },

    tagName: 'tr',
    className: 'pageedit',

    template: Handlebars.compile( PageViewTemplate ),

    render: function() {
        this.$el.html( this.template( this.model ) );
        return this;
    },

    unpublish: function() {
        alert('hi');
    }
});

PagesView.js

PagesView = Backbone.View.extend({

     tagName: 'tbody',

     initialize: function() {
         this.collection.on('reset', this.render, this);
         this.render();
     },

     template: Handlebars.compile(PagesTemplate),

     render: function() {
         var countPages = this.collection.at(0).get('count');

         _.each(this.collection.at(0).get('pages'), function(model) {
              pageView = new PageView({ model: model });
              this.$el.append( pageView.render().el );
         }, this);

         $('.main').html( this.template({ pages: this.$el.html() }) );

         this.delegateEvents(this.events);

         return this;
     },
});

Page.hbs

<td class="pageId">
    {{ id }}
</td>
<td class="pagename">
    <a href="/pages/{{ alias }}">{{ pagename }}</a>
</td>
<td class="catname">{{ catname }}</td>
<td class="author">{{ author }}</td>
<td>{{ date }}</td>
<td>
    {{#if status}}
        <a href="#" class="unpublish">
            <img src='../{{ siteURL }}assets/img/admin/published.png'>
        </a>
    {{else}}
        <a href="#" class="publish">
            <img src='../{{ siteURL }}assets/img/admin/not-published.png'>
        </a>
    {{/if}}
</td>
<td>
    <a href="#" class="intrash">
        <img src='../{{ siteURL }}assets/img/admin/delete.png'>
    </a>
</td>

Pages.hbs

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Catalog</th>
            <th>Author</th>
            <th>Date</th>
            <th>Status</th>
            <th>Intrash</th>
        </tr>
    </thead>
    <tbody>
        {{{pages}}}
    </tbody>
</table>

router.jsにすべてのインスタンスを作成します。

var pages = new Pages();
pages.fetch().done(function() {
    new PagesView({ collection: pages});
});

.unpublishリンクをクリックしても、PageViewのイベントは発生しません。すべてのビューは良好にレンダリングされますが、イベントが機能しません:(私を助けることができますか？

4

1 に答える 1

1

あなたの問題はここにあると思います：

$('.main').html( this.template({ pages: this.$el.html() }) );

と言うとすぐに、予定this.$el.html()が失われます。バックボーンはdelegate(または同等onの ) をビューのelイベント処理用にバインドするため、イベント処理は DOM ノード オブジェクトにバインドされます。と言うとthis.$el.html()、すべてが文字列に変換され、その文字列が DOM に入ります。ただし、イベントは文字列ではなく DOM 要素オブジェクトにバインドされます。その結果、すべてが正しく見えますが、イベントは発生しません。

次のPages.hbsようになります。

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Catalog</th>
            <th>Author</th>
            <th>Date</th>
            <th>Status</th>
            <th>Intrash</th>
        </tr>
    </thead>
</table>

そして、ページ上のすべてを取得するには、次のようにする必要があります。

// Add the basic <table> HTML.
$('.main').html(this.template());
// Append the <tbody> DOM node which has event handling attached to it.
$('.main').find('table.table').append(this.$el);
于 2013-01-16T19:51:20.790 に答える