在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

人们通常会陷入这样一种模式，他们认为改变页面的唯一方法就是完全重新渲染模板。但渲染模板只是更新页面的一种解决方案。您仍然可以在主干视图中自由使用传统方法。因此，另一种可能的解决方案是您只需从您的角度调整 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。

Answer 2

假设您有一个这样的模型：

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

当您的 Ajax 请求成功时，您可以导航到下一页。
如果失败，您可以将模型设置为使用 undefined 来指示缺失值：

// 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 来检查是否输入了错误的值（实际上什么也没有）。
在您的模板中，您可以适当地检查此行为。