backbone.js에서 뷰를 다시 렌더링하는 것을 처리하는 가장 좋은 방법은 무엇입니까?

Question

나는 다음과 같은보기가이 같은

Main.Views.Login = EventQ.View.extend({ 
events: { 
    "submit form": "login" 
}, 

template: "login", 

login: function(e) { 
    var me = this; 

    $.ajax({ 
     url: "/api/users/login", 
     type: 'POST', 
     dataType: "json", 
     data: $(e.currentTarget).serializeArray(), 

     success: function(data, status){ 
      EventQ.app.router.navigate('dashboard', true); 
     }, 

     error: function(xhr, status, e) { 
      var result = $.parseJSON(xhr.responseText); 
      me.render_with_errors(result.errors); 
     } 
    }); 

    return false; 
}, 

render: function(done) { 
    var me = this; 

    // Fetch the template, render it to the View element and call done. 
    EventQ.fetchTemplate(me.template, function(tmpl) { 
     me.el.innerHTML = tmpl(me.model.toJSON()); 
     done(me.el); 
    }); 
}, 

render_with_errors: function(errors) { 
    var me = this; 

    // Fetch the template, render it to the View element and call done. 
    EventQ.fetchTemplate(this.template, function(tmpl) { 
      me.el.innerHTML = tmpl(errors); 
    }); 
} 
}); 

간단한 템플릿 : 내가 무엇을 찾고 있어요 것은 오류가 반환하는 경우 템플릿을 다시 렌더링 할 수 있습니다

<form> 
<input name="username" /> 
<input name="password" /> 
<button type="submit" /> 
</form> 

하지만, 입력이 채워진 채로 유지하십시오. 오류 템플릿은 다음과 같습니다.

<form> 
<input name="username" /> 
<label class="error">required</label> 
<input name="password" /> 
<button type="submit" /> 
</form> 

확인할 수있는 모델 또는 뷰에보기를 바인딩하는 방법이 있습니까? 현재 render_with_errors는 폼에 채워진 모든 데이터를 잃어버린 사실을 제외하면 작동합니다.

Answer 1

이 같은 모델을 세웠 :

Main.Models.LoginModel = EventQ.Model.extend({ 
    /* ... */ 
    defaults: { 
     'username': "", 
     'password': "" 
    }, 
    /* ... */ 

당신의 아약스 요청의 성공은, 다음 페이지로 이동할 수 있습니다

.

// assumed you did not enter your password 
this.me.model.set({ 'username': textBoxValueSoFar, 'password': undefined }); 

다음이 같은 템플릿을 구축 할 수

는 (처음 페이지로드에서와 동일하게 될 것입니다) :

가 실패 할 경우, 당신은 누락 된 값을 표시하기 위해 정의되지 않은 사용하는 모델을 설정할 수 있습니다

<form> 
    <input name="username" value="{{username}}" /> 
    {{#unless username}} 
    <label class="error">required</label> 
    {{/unless}} 
    <input name="password" value="{{password}}" /> 
    {{#unless password}} 
    <label class="error">required</label> 
    {{/unless}} 
</form> 

{{unless}}는 값이 false, undefined, null 또는 []가 아닌지 확인합니다. 따라서 첫 번째 페이지로드시에는 빈 문자열이며 오류 메시지가 제공되지 않습니다.

자세한 내용은 http://handlebarsjs.com/의 "unless"부분을 참조하십시오.

그래서 지금까지 잘못된 값이 입력되지 않았 음을 나타 내기 위해 빈 문자열을 사용합니다. undefined를 사용하여 잘못된 값 (사실, 아무 것도 없음)이 입력되었는지 확인합니다. 템플릿에서이 동작을 적절하게 확인할 수 있습니다.

Answer 2

사람들이 그들이 페이지를 변경할 수있는 유일한 방법은 템플릿을 완전히 다시 렌더링한다고 생각하는 방식에 익숙해지는 것이 일반적입니다. 그러나 렌더링 템플릿은 페이지를 업데이트하는 유일한 해결책입니다. 백본보기에서 전통적인 방법을 자유롭게 사용할 수 있습니다. 그래서 또 다른 가능한 해결책은 단순히보기에서 dom을 조정하는 것입니다.

<form> 
<input name="username" /> 
<label class="error" style="display:none">required</label> 
<input name="password" /> 
<button type="submit" /> 
</form> 

을 다음 로그인 기능에 다음과 같이 변경합니다 :

error: function(xhr, status, e) { 
    var result = $.parseJSON(xhr.responseText); 
    me.showLoginError(); 
} 
showLoginError: function() { 
    this.$('.error').show(); 
} 

물론 당신은 항상 더 추가 할 수 있습니다, 메시지 사용자 지정

그래서 템플릿은 다음이 될 수 있도록 등등.

전체 템플릿 렌더링만으로는 백본 코드가 응용 프로그램 상태의 변경에 반응하는 유일한 방법이 아니라는 것을 기억하는 것이 중요합니다. render가 아닌 다른 방법으로 DOM을 조작 할 수 있습니다.