2011-02-15 5 views
3

Backbone.js를 사용하여 앱을 제작하고 있지만 초기에 해결할 수없는 문제가 발생했습니다.보기에 여러 이벤트 발생 렌더링

지금은 간단한 목록/세부보기 설정이 있지만 세부적인보기를 렌더링 할 때마다 내 이벤트가 복합됩니다. 예를 들어 두 개의 상세보기를 표시하고 링크를 클릭하면 두 번 클릭됩니다.

내보기 (커피 스크립트로 작성) 다음과 같습니다

# 
# Project List View 
# 
class ProjectListView extends Backbone.View 

    el: $("#projectList") 

events : { 
    "click #addProject" : "createNewProject" 
} 

initialize : -> 
    @template = _.template(app.projectListView) 
    _.bindAll(this, "render", "createNewProject") 
    @render() 

createNewProject : (e) -> 
    e.preventDefault() 
    e.stopPropagation() 
    tempProject = Projects.create({ 
    title : 'Test Project' 
    description : '' 
    browserDefault : 12 
    lineHeight : 21 
    }) 

render : => 
    $(@el).html(@template()) 
    @delegateEvents() 
    return @ 

은 분명히 아웃이 사건을 내가 이벤트를 발사 어떤 클릭을하지 않습니다. 내가 여기서 무엇을 놓치고 있니?

답변

3

붙여 넣은 코드가 올바르게 들여 쓰여지지 않는 것 같습니다. 그게 원래 어떻게 된거야?

_.bindAll 줄이 필요하지 않습니다. 대신에, 단지 줄리앙이 제안 내가 어떤 문체 변경을하고 여분의 @delegateEvents을했다

(대신 ->의) 당신의 방법을 정의하는 =>를 사용합니다. 작동하는지 확인하십시오 :

class ProjectListView extends Backbone.View 

    el: $("#projectList") 

    events: 
    "click #addProject" : "createNewProject" 

    initialize: => 
    @template = _.template(app.projectListView) 
    @render() 

    createNewProject: (e) => 
    e.preventDefault() 
    e.stopPropagation() 
    tempProject = Projects.create 
     title: 'Test Project' 
     description: '' 
     browserDefault: 12 
     lineHeight: 21 

    render: => 
    @el.html @template() 
    @ 
+0

예. 일부 코드 정리와 함께 작동합니다. 매번 내가하고 싶지 않은 새로운 시야를 만들기 때문입니다. _bindAll 행을 제거 할 수 있는지 몰랐습니다. 매우 흥미로 웠습니다. 코드에서 약간 벗어 났을 때 코드의 서식이 올바르게 들여 쓰기되었습니다. – JMWhittaker

+0

이 코드의 경우 백본이 올바른 컨텍스트의 이벤트 처리기를 호출하므로'=>'는 필요하지 않습니다. – rfunduk

+0

@rfunduk 사실. "왜 안돼?" 특색. –

2

다음은 내 코드에 대한 의견입니다. 백본은 이벤트 옵션에 따라 자동으로 (delegateEvents를 사용하여) 이벤트를 위임합니다. 렌더링 기능에서이를 수행 할 필요는 없습니다 (대부분 이중 이벤트 발생 원인). 렌더링에서 deleteEvents를 제거하십시오.

또한 @el은 이미 jQuery 객체로 정의되어 있으므로 렌더링 할 때 다시 할 필요가 없습니다.

프로젝트 목록보기를 2 개 만들 계획입니까? 그렇다면 ID는 고유해야합니다 ...