2012-08-23 2 views
0

백본보기가 있습니다.ajax의 다른보기 내부에있는 백본보기. 이벤트가 작동하지 않습니다.

 render: function() { 
      var self = this; 
      $.get('/Blog', request, function (data) { 
       self.$el.html(data); 
       model.trigger('blogContainerLoaded'); 
      }); 
     } 

구성 요소 코드 : 그것은 (AJAX와 백본에 구성 요소) 내용을로드

window.App = { 


init: function (options) { 
    var BlogModel = Backbone.Model.extend({ 
    }); 

    var model = new BlogModel(); 

    var BlogController = Backbone.Router.extend({ 
     routes: { 
      "": "posts", 
      "posts": "posts", 
      "posts/:postId": "post", 
      "posts/:postId/": "post", 
     }, 
     posts: function (anchor) { 
      window.App.views.posts.render(anchor); 
     }, 
     post: function (postId, commentId) { 
      window.App.views.post.render(postId, commentId); 
     }, 
    }); 

    var controller = new BlogController(); 
    if (notLoaded) { 
     var views = { 
      posts: new PostListView({ model: model, controller: controller }), 
      post: new PostView({ model: model, controller: controller }), 
     }; 
     this.views = views; 
     Backbone.history.start(); 
    } 
} 

을};

var PostListView = Backbone.View.extend({ 
el: $(".posts"), 
events: { 
    "click .js-edit-message": "editMessage", 
    "click .js-open-post": "navigateToPost", 
    "click .js-move-post": "move" 
}, 
editMessage: function() { 
    debugger; 
}, 
navigateToPost: function() { 
    debugger; 
}, 
move: function() { 
    debugger; 
}, 

모든 html 코드가 아약스와 함께로드됩니다. 작동하지만 이벤트 (클릭 수 및 기타)가 실행되지 않습니다! AJAX가없는 블로그 구성 요소를로드 할 때 - 이벤트가 작동합니다. 도와주세요!

답변

1

아약스 호출이 완료되기 전에보기가 인스턴스화 될 가능성이 큽니다. 아약스는 비동기 적이기 때문에로드하는 동안 (결국) 뷰를 초기화하는 코드가 먼저 실행됩니다. 따라서보기가 DOM에 이벤트를 첨부하려고 할 때 필요한 요소가 없습니다. 당신이 그것의 아약스 부분을 제거 할 때, 코드가 작동하는 이유

도 (지금 동기 그리고 당신이보기 코드를 초기화하기 전에 DOM이 존재합니다.) 설명 할 수

하는 아약스 내부에 초기화 코드를 넣어보십시오 다음과 같이 콜백 (가능한 경우)

render: function() { 
     var self = this; 
     $.get('/Blog', request, function (data) { 
      self.$el.html(data); 

      self.blogContainer = new BlogContainerView(); // Or however you do it 
     }); 
    } 

또 다른 가능성은 그 시간에 trigger.('blogContentLoaded') 다음 첨부 이벤트를 유지하는 것입니다. Backbone.View의 delegateEvents() 메서드가 유용 할 수 있습니다.

또는 그와 유사한 것. 이제 View 객체가 이벤트를 첨부 할 수있는 DOM을 사용할 수 있습니다.