1

当我在客户端执行 model.save() 时，我在 Spring 框架控制器中得到空值。如果我使用 Jquery ajaxSubmit() 接收的值很好，如何使用 model.save()

我的登录模型和客户端代码中的视图（使用主干）

$.ready = function() {

    var LoginModel, LoginView;

    // Login Model
    LoginModel = Backbone.Model.extend({

        // URL to authenticate login.
        url: 'authenticate',


        // Ensure that each todo created has `title`.
        initialize: function() {
            console.log("LoginModel initialized");

            this.bind("change", this.attributesChanged);
        },

        validate: function(attrs) {
            console.log("LoginModel validate");
        },

        attributesChanged: function(){
            console.log("LoginModel attributesChanged");
        }

    });

    // Login View
    LoginView = Backbone.View.extend({
        el: $('#loginform'),

        events: {
            "click #login-button": "performLogin",
            "change #login-username": "setUsername",
            "change #login-password": "setPassword"
        },

        initialize: function() {
            this.username = $("#login-username");
            this.password = $("#login-password");
            this.loginButton = $("#login-button");
        },

        setUsername: function(e){
            this.model.set({username: this.username.val()});
            console.log("LoginView username set = " + this.username.val());
        },

        setPassword: function(e){
            this.model.set({password: this.password.val()});
            console.log("LoginView password set = " + this.password.val());
        },

        performLogin: function(event) {

            event.preventDefault();

            this.model.save();

            return false;
        }
    });

    var loginview = new LoginView({model: new LoginModel()});
}

HTML 表单

<form id="loginform" action="authenticate" method="POST">
    <div>
        User Name
        <input name="username" type="text" align="right" id="login-username">
        <br/>
        <br/>
        Password
        <input name="password" type="password" align="right" id="login-password">
    </div>
<button type="submit" id="login-button">Login</button>
</form>

使用 $.ajaxForm 的脚本标签

    $('#loginform').submit(function() {

        $(this).ajaxSubmit();

        return false;
    });
4

2 回答 2

0

下面的代码有效

    Backbone.Model.prototype.sync = function(method, model, options) {
        if (method == "create" || method == "update") {
            var self = this;

            var options = {
                           url: this.url,
                           type: 'POST',
                           success:    function() {
                               alert('Thanks for your comment!');
                           }
                       }; 

            // submit the form
            $(this.el).ajaxSubmit(options);
        }
    };

在最后一行中，我使用了 $(this.el)，这里的 'el' 表示表单 id（选择器）。

于 2012-12-12T12:11:07.740 回答
0

您正在使用jQuery form plugin，我相信它使用 JQueryserialize方法，它将表单参数转换为查询字符串：

?username=name&password=pw

与 Backbone 对比，后者使用以下方法序列化模型数据toJSON：

{ username: name, password: pw }

因此，您似乎有两种选择：

  1. 修改 Spring 服务，使其可以接受 JSON 数据
  2. 覆盖 Backbone 的sync（或者它的序列化/反序列化方法toJSON和parse）

假设您使用 (2)，您可以在单个模型中覆盖该方法，或者通过修改Backbone.Model原型来全局覆盖该方法：

Backbone.Model.prototype.sync = function(method, model, options) {
    if (method == "create" || method == "update") {
        var self = this;

        // get model in query-string format
        var q = _.keys(this.attributes).map(function(prop) {
            return prop + '=' + self[prop];
        }).join('&');
        // Post data to server
        $.post(this.url, _.extend(options, { data: q }) );
    }
}
于 2012-12-11T23:32:57.487 回答