javascript - 主干登录屏幕

Question

我对 BackboneJS 还很陌生。在编写了多个 GET 实现后，我尝试使用 Backbone JS 实现登录屏幕。

文件夹结构
应用
-->型号
-->查看
-->模板
-->服务器

formSignIn.html

<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" id="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" id="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
  <input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

主干 View

var SignInView = Backbone.View.extend({
    el:$('.container'),
    template:_.template('../templates/formSignIn.html'),
    events: {
        "click .btn":"signIn"
    },
    initialize: function() {
        this.model.on('change', this.render, this); 
    },
    render: function() {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
    },
    signIn: function() {
      this.model.signIn({
        email: $('#email').val(),
        password: $('#password').val()
      });
    }
});
var signInView = new SignInView({model: signInModel});
signInView.render();

Backbone 模型

var SignInModel = Backbone.Model.extend({
    url:function() {
        'http://localhost:3000/singIn'
    },
    defaults: {
        email:"",
        password:""
    },
    parse: function(resp) {
        return resp;
    },
    signIn: function() {
        this.save();
    }
});
var signInModel = new SignInModel();

问题:

1. 模板 HTML 未呈现。当我打开页面时，它显示 ../templates/formSignIn.html。这意味着 _template 无法识别 html。

2. View 和模型的实现如何？这是正确的做法吗？我对调用模型的 save() 不太有信心。

Answer 1

回答你的第一个问题 _.template(...) 接受一个字符串。如果您想要 ../templates/formSignIn.html 的内容，您必须将其包含在 dom 中或请求它，例如使用 ajax。

如果包含在 dom 中，它看起来会像这样:

// Somewhere in the html...
<script type="text/html" id="form-signin-tpl">
  <form class="form-signin" role="form">
    ...
  </form>
</script>

// in your view
_.template($('#form-signin-tpl').html());

如果您需要在运行时请求模板，您可以使用 RequireJS 来很好地处理这个问题，或者您可以使用 jQuery 手动请求它，也许像这样:

$.get( "path/to/templates/formSignIn.html", function( html ) {
  var tpl = _.template(html);
});

<小时/>

回答第二个问题

1. 模型的 url 参数是字符串，而不是函数。
2. 如果您需要自定义服务器数据的解析方式，则只需定义 parse。

这可能更符合您的要求:

var SignInModel = Backbone.Model.extend({
    url: 'http://localhost:3000/singIn',
    defaults: {
      email:"",
      password:""
    },
    signIn: function() {
      this.save();
    }
});
var signInModel = new SignInModel();

<小时/>

最后，关于验证用户身份，模型可能不是处理此问题的最佳方法。有一些关于在 Backbone 应用程序中验证用户身份的问题，such as this one