1

クライアント側で model.save() を実行すると、Spring フレームワーク コントローラーで null 値が取得されます。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 pluginJQuery メソッドを使用していると思われます。serialize

?username=name&password=pw

以下を使用してモデル データをシリアル化する Backbone とは対照的toJSONです。

{ username: name, password: pw }

したがって、次の 2 つのオプションがあるようです。

  1. JSON データを受け入れるように Spring サービスを変更する
  2. バックボーン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 に答える