在backbone.js中處理重新渲染視圖的最佳方法是什麼？

我有以下看法：在backbone.js中處理重新渲染視圖的最佳方法是什麼？

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的工作原理除了我丟失了填寫在表單上的所有數據之外。

來源

2012-02-07 sontek

你有沒有考慮過不使用單獨的模板的錯誤？也許在你的真實情況下，模板更加不同。但在你的例子中，你可以在你的錯誤/成功處理程序中顯示/隱藏錯誤消息。甚至可以進行一些即時驗證。 – 2012-02-07 14:56:15

認爲你有這樣的型號：

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，undefined，null或[]。所以在第一頁加載時，它是一個空字符串，並且沒有提供錯誤消息。

有關詳情，請參閱http://handlebarsjs.com/帶「除非」的部分。

所以你要做的是：你使用一個空字符串來表示迄今爲止沒有輸入錯誤的值。您使用undefined來檢查是否輸入了錯誤的值（實際上沒有）。在您的模板中，您可以適當地檢查此行爲。

來源

2012-02-08 12:17:40 knub

如何讓模板在模型更改時自行更新？否則，你會被重新渲染模板。 – nimrodm 2012-02-10 16:38:49

人們通常會進入這種模式，他們認爲只有這樣，他們才能改變頁面的唯一方式就是完全重新呈現模板。但渲染模板只是更新頁面的一種解決方案。您仍然可以在骨幹視圖內自由使用傳統方法。因此，另一種可能的解決方案是讓您從視圖中簡單調整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。

來源

2012-02-09 01:59:12

在backbone.js中處理重新渲染視圖的最佳方法是什麼？

回答

相關問題