Backbonejs 뷰 바인딩 개념적 피드백

이 기사 (http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/)를 보았습니다. 인스턴스화 한 후 라우터에서 뷰를 바인딩하고 렌더링하는 것이 가장 좋은 방법인지 궁금합니다. 내 견해를 구속하고 내 뷰 정의에서 렌더링했습니다.Backbonejs 뷰 바인딩 개념적 피드백

현재이 내가 설정하고 내 의견을 호출했습니다 방법입니다

EmployeeView :

EmployeeView = Backbone.View.extend({ 
    el: '#content', 
    template:template, 

    initialize: function() { 

    this.collection.fetch({ 
     reset: true 
    }); 

    this.collection.on('reset',this.render, this); 
    }, 
    render: function(){ 
    this.el.innerHTML = Mustache.to_html(this.template, { employee_list: this.collection.toJSON()}); 
    console.log('render called');  
    }

내 라우터 :

employeeList: function() { 
    var c = new EmployeeCollection 
    new EmployeeView({ 
     collection: c 
    }); 
    }

그것은 잘 작동합니다. 그러나 기사에 따라 더 나은 연습은 다음을 수행하는 것입니다 기사가 말했듯이 다른 DOM 이벤트에서보기를 분리시킨다 때문에

employeeList: function() { 
    var c = new EmployeeCollection 
    $('#content').html(new EmployeeView({collection: c}).render().el); 
    },

내가 문서 솔루션을 좋아

EmployeeView = Backbone.View.extend({ 

    template:template, 

    initialize: function() { 

    this.collection.fetch({ 
     reset: true 
    }); 

    this.collection.on('reset',this.render, this); 
    }, 
    render: function(){ 
    this.el.innerHTML = Mustache.to_html(this.template, { employee_list: this.collection.toJSON()}); 
    console.log('render called'); 
    return this; 
    }

라우터에게 및 내 모든 조정과 맞춤 설정을 한 곳 라우터에 집중할 수있게 해줍니다. 하지만 컬렉션/모델을 전달할 때 내 페이지를 초기화 할 때 데이터를 가져와야하므로 내 페이지가 두 번 렌더링됩니다. 내 질문은 다음과 같습니다.

정말 좋은 방법입니까?
제안 된 방법을 사용하려면 렌더링을 두 번 호출하지 않는 방법은 무엇입니까?
프런트 엔드 사용자 상호 작용이있는 경우 뷰 모음/모델을 새로 고쳐야하는 경우에는 어떻게합니까? 내 견해대로해야 할까? 아니면 라우터에서 그런 일이 일어날 수 있겠는가?

출처

2016-07-04 mo_maat

여기에있는보기와 기사에있는보기는 완전히 다릅니다. 당신의 예에서

는, 뷰는 DOM (#content)의 요소, 특히 초보자를위한 좋은 방법이 아닙니다 우리가 매일 볼 버그의 많은 원인이
을 바인딩됩니다.

예를 들어보기의 인스턴스를 2 개 만들면 이벤트가 여러 번 실행되고 모든 지옥이 느슨해집니다.

기사의보기 좋습니다 인스턴스 당 메모리에 새로운 <div> 요소를 만듭니다. 뷰의 렌더링

이제

, DOM이를 추가, 초보자는 종종 내부의 다음 같은 물건을 할 :

이
$('#content').html(this.$el);

이 뷰 안에 글로벌 선택기를 생성하고 외부 세계의 그것을 인식하게하는 좋은 습관이 아닙니다.

아마도이 기사는 라우터의 DOM에 뷰 요소를 추가하는 것과 관련하여 문제이고 선물이며 대안이 될 것입니다. 제 생각에는 좋은 습관입니다.

은 어떻게 당신이 할 수있는 기사의 코드에 두 번 렌더링 방지하려면

$('#content').html(new EmployeeView({collection: c}).el);

el 라이브 참조되고,이 업데이트 될거야 성공 가져올 때. .render().el은 기존의 모든 블로그 및 자습서에서 흔히 잘못 이해하고있는 또 다른 보급 정보입니다.

사이드 참고 : 우리는 모범 사례를 논의 중 좋은 방법이 아닙니다 var c = new EmployeeCollection에서와 같이 세미콜론 괄호를 생략되기 때문에. 이동 : var c = new EmployeeCollection();

출처

2016-07-05 05:27:11

당신은 거의 옳았습니다. 그냥 두 번 렌더링하는 것뿐입니다. 아무런 의미가 없으므로 올바른 방법이라고 생각하지 않습니다.

EmployeeView = Backbone.View.extend({ 
    template:template, 

    initialize: function(){ 
    console.log("Will print second"); 
    this.collection.fetch({ reset: true }); 
    this.collection.on('reset', this.appendEmployees, this); 
    }, 
    render: function(){ 
    //this.el.innerHTML = Mustache.to_html(this.template, { employee_list: this.collection.toJSON()}); 
    console.log('Will print 3rd. render called'); 
    return this; 
    } 

    appendEmployees: function(){ 
    console.log("Will print 4th. Appending employees"); 
    $(this.el).html(Mustache.to_html(this.template, {employee_list: this.collection.toJSON() }); 
    } 

})

라우터

employeeList: function() { 
    var c = new EmployeeCollection() 
    var view = new EmployeeView({ collection: c }); 
    console.log("Will print 1st"); 
    $('#content').html(view.render().el); 
}

첫째, 당신은 appendEmployees 기능 때 당신이 view.render().el을 수행 할 때, 그것은 #content

두 번째로 (그 시간에 비어) 뷰의 요소를 추가합니다 실행하고 컬렉션 재설정. 이 때까지는 요소가 이미 DOM에 배치됩니다.

새로 고침이 필요한 경우보기 내부에서 appendEmployees 함수를 호출하거나 컬렉션을 재설정하여 완료 할 수 있습니다. 또는 백본을 통해 동일한 경로로 이동하면 전체 프로세스가 반복되므로 콜렉션이 다시 호출되고 페이지가 처음부터 렌더링됩니다. 그래서 언제/왜 당신이 다른 하나를 선택하겠습니까에 대한 귀하의 환경 설정에 온다. 희망이 도움이됩니다.

출처

2016-07-04 18:09:14 Kumar

Backbonejs 뷰 바인딩 개념적 피드백

답변

관련 문제