处理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-Request成功时，您可以导航到下一页。 如果失败，您可以将模型设置为使用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，undefined，null或[]。 所以在第一页加载时，它是一个空字符串，并且没有提供错误消息。

有关详细信息，请参阅http://handlebarsjs.com/中带有“除非”的部分。

所以你要做的是：你使用一个空字符串来表示到目前为止没有输入错误的值。 您使用undefined来检查是否输入了错误的值（实际上没有）。 在您的模板中，您可以适当地检查此行为。