2

バックボーンフォームライブラリを使用して、Backboneで簡単なログインフォームを実装しようとしています。

$(function() {
  var LoginUser = Backbone.Model.extend({
    schema: {
      username: { type: 'Text'   },
      password: { type: 'Text'   }
    },
    url: 'login_backbone_form'
  });

  var thisLogin = new LoginUser();

  var form = new Backbone.Form({
    model: thisLogin,
    events: {
      "click button#formButton"   :   "saveForm"
    },

    saveForm: function() {
      alert('hit saveForm');
      this.model.save();
    }
  }).render();

  window.form = form;
  $('#formHook').html(form.el);
  $('<button type="button" name="login" id="formButton">Login</button>')
     .appendTo('#formHook');
});

私のHTMLにはid='formHook'のdivがあり、ページにはログインボタンのあるフォームが表示されます。しかし、ボタンを押しても何も起こりません。

私はここで何が間違っているのですか？

4

1 に答える 1

4

最初の問題は、フォームボタンがフォームビューのコンテキスト外にあることである可能性があります。DOMイベントハンドラーをビューにアタッチすると、それらはそのビュー内の要素にのみ応答します。フォームとボタンをマスタービューに埋め込んでみてください。

これがコードで、JSFiddleにもあります：http： //jsfiddle.net/evilcelery/hsSru/

$(function() {
    var LoginUser = Backbone.Model.extend({
        schema: {
            username: {
                type: 'Text'
            },
            password: {
                type: 'Text'
            }
        },
        url: 'login_backbone_form'
    });

    var LoginView = Backbone.View.extend({
      events: {
          "click button#formButton": "saveForm"
      },

      initialize: function() {
        this.model = new LoginUser();
      },

      render: function() {
        var $button = $('<button type="button" name="login" id="formButton">Login</button>');

        this.form = new Backbone.Form({ model: this.model });

        this.$el.append(this.form.render().el);
        this.$el.append($button);

        return this;
      },

      saveForm: function() {
          this.form.commit();
          this.model.save();

          alert('hit saveForm');
          console.log(this.model.toJSON());
      }
    });

    window.loginView = new LoginView;
    $('#formHook').html(loginView.render().el);
});
于 2012-02-08T21:31:38.807 に答える