9

以下のように、バックボーン レンダリング ビューを twitter ブートストラップ ポップオーバーに挿入します。問題は、そのビューのコンテンツ オプション バックボーン イベントを介して挿入するときに発生しないことです。$(selector).htmlattendsShow.render().elイベントで問題なく動作するテスト用にdivにビューを挿入しました。前もって感謝します

      attendance = new Attendance()
      attendance.url = "#{attendanceUrl}/#{attendanceId}" 
      attendance.fetch
        success: ->
          attendanceShow = new ExamAttendanceShow({model: attendance })
          currentTarget.popover
            html : true
            content: ->
              attendanceShow.render().el

敬具、ジョージ。

4

2 に答える 2

2

私が理解していることから、コードと説明に基づいて、ポップオーバーのインスタンスを作成するだけで、表示することはありません。私はライブ デモを持っていますが、CoffeeScript では動作しません (私は個人的に CoffeeScript が嫌いです)。以下のコードとこの jsfiddleで確認できます。

data1.json

{"content": "lorem ipsum dolor sit amet"}

index.html

<div class="container">
    <div class="row">
        <button class="btn" data-target="popover">Popover</button>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <button class="btn" data-action="change-content">Change Content</button>
    </div>
</div>

main.js

var Main = Backbone.View.extend({
    model: null,
    item: null,
    popover: false,

    events: {
        'click .btn[data-target]': 'button_click',
        'click .btn[data-action="change-content"]': 'change_content'
    },

    initialize: function() {
        _.bindAll(this);

        this.model = new PopoverModel();
        this.model.view = new PopoverContentView({model: this.model});

        this.item = this.$('.btn[data-target]');
        this.item.popover({
            html: true,
            content: this.model.view.render().el
        });
    },

    button_click: function(event) {
        if (!this.popover) {
            this.model.url = 'js/data1.json';
            this.model.fetch({
                success: this.model_fetched
            });
        } else {
            this.popover = false;
        }
    },

    model_fetched: function() {
        if (!this.popover) {
            this.item.popover('show');
        } else {
            this.item.popover('hide');
        }

        this.popover = !this.popover;
    },

    change_content: function(event) {
        this.model.set('content', 'Some random content... ' + parseInt(Math.random() * 10));
    }
});

var PopoverModel = Backbone.Model.extend({
    defaults: {
        content: ''
    }
});

var PopoverContentView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this);
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.html(_.template('<%= content %>', this.model.toJSON()));
        return this;
    }
});


var main = new Main({
    el: '.container'
});
于 2013-02-07T03:44:17.703 に答える
0

私は同様の問題を抱えています.Georgiの答えを拡張するには、これを試してください:

ポップアップにボタンまたはリンクを (配置する動的テキストの代わりに) 配置し、クリック イベントなどのイベントを処理します。

于 2013-02-25T21:36:43.627 に答える