backbone.jsでビューの再レンダリングを処理する最良の方法は？

Question

I次のビューがあります。このような

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': "" 
    }, 
    /* ... */ 

あなたのAjaxリクエストの成功は、あなたが次のページに移動することができ

。 それが失敗した場合は、欠損値を示すために、未定義を使用するようにモデルを設定することができます。

：

// 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、未定義、nullまたは[]でないかどうかをチェックします。したがって、最初のページの読み込みでは、空の文字列であり、エラーメッセージは表示されません。

詳しくはhttp://handlebarsjs.com/を参照してください。

これは、空の文字列を使用して、間違った値が入力されていないことを示します。 undefinedを使用して、間違った値（実際には何も入力されていない）が入力されているかどうかを確認します。 テンプレートでは、これを適切に確認できます。

Answer 2

一般的に、ページを変更できる唯一の方法はテンプレートの完全な再描画だと思うようなモードに入ることです。しかし、レンダリングテンプレートは、ページを更新するための1つの解決策に過ぎません。バックボーン・ビューから従来の方法を自由に使用することはできます。もう一つの可能​​な解決策は、単にあなたの視点から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(); 
} 

そしてもちろん、あなたは常にそれにさらに追加することができ、メッセージのカスタマイズ

だからあなたのテンプレートは次のようにします

完全なテンプレートレンダリングだけでは、バックボーンコードがアプリケーションの状態の変化に反応する唯一の方法ではなく、レンダリング以外の方法でDOMを操作するのは大丈夫です。