3

ビューのイベント処理に問題があります。彼らは単に発砲しません。ビューには、次のようなテンプレートからの html があります。

<script type="text/template" id="intro-slide-template">
  <div class="slide intro" id="intro-slide">
    <a href="#" class="startpresentation" id="start-btn">
      <%= startpresentation %>
    </a>
  </div>
</script>

ここまでは順調ですね。ビューコード自体は次のようになります。

  /* ********* Slide View  *********  */
    window.IntroSlideView = Backbone.View.extend({           
        initialize: function(){             
            this.template = _.template($("#intro-slide-template").html());          
        },  
        render: function(){     
            $(this.el).html(this.template(this.model.toJSON()));             
        },
        events: {
            "click #start-btn": "clickHandler"
        },
        clickHandler: function() {
            console.log("IntroSlideView     ::      clickHandler");
        }           
    });

これは、スライドをメイン アプリのビューにレンダリングする方法です。

/* ********* App View  *********  */
window.AppView = Backbone.View.extend({
    el: $("#content"),
    initialize: function(){
        _.bindAll(this, 'render');      

        //render 
        this.render();
    },
    render: function(){                     
        this.el.innerHTML = "";     
        var slide = this.model.get("currentSlide");
        slide.render();             
        this.el.innerHTML = slide.el.innerHTML;
    }   
});

ビューは画面に完全にレンダリングされており、本来のように機能します。しかし、クリックイベントは発生していません。

スライド ビュー オブジェクトを調べると、クリック イベントを発生させる必要があるボタンを含む、適切な HTML を含む el オブジェクトがあることがわかります。

ビューのイベントをログに記録すると、それらが設定されていることがわかります。

Object
click #start-btn: "clickHandler"
__proto__: Object
4

1 に答える 1