0

バックボーンモデルからデータを取得するフォームがあります。フォームが表示されると、初期値はバックボーン モデルに設定されています。ここで、フィールドが編集された場合、フィールドに変更が加えられるとすぐに「保存」ボタンを有効にしたいと考えています。ただし、フィールド値を変更して元の値に再度変更すると、モデルを保存できる「保存」ボタンが再び無効になるはずです。 2/

モデルをテンプレートにバインドするためにbackbone.js と backbone.stick ( http://nytimes.github.io/backbone.stickit/ ) を使用しています。

モデルをパラメーターとして次のようにビューを作成します

RegionManager.show(new app.myView({
  model : new app.myModel(
   {id: 1})
 }));

私のモデル値は次のようなものです：

 {
   "id":1, "name:"a" , "age":21
 }

ビューは次のとおりです。

myView = Backbone.View.extend({
     template: _.template( $("#template").html() ),
      events: {
         "click #save" : "update",
     },
    bindings: {
       '#id': 'id',
       '#name': 'name',
       '#age': 'age'
    },
    initialize: function () {
   if(this.model){
       this.model.fetch();
   },
   render: function () {           
        this.$el.html( this.template );
        this.stickit(); //used library http://nytimes.github.io/backbone.stickit/
        Backbone.Validation.bind(this);
   },
   update: function() {
       this.model.save (
       {success: this.success_callback, error: this.error_callback});
   },
   success_callback: function (model, response) {
   },
   error_callback: function (model, response) {
        alert('error.');
  }
});

私のテンプレートは次のようになります

 <script type="text/template" id="template">
 <form id="myForm " >
 <fieldset>
     <label>Name</label>
      <input type="text" id="name" name="name" />
      <label>Age</label>
       <input type="text" id="age" name="age" />
       <input type="hidden" id="id" name="id"/>
   </fieldset>
 <a id="save" disabled >Save Changes</a>
 </form>

イベントをバインドする場所と、ユーザーが何らかの値を変更したことを知る適切な方法とは何か、フォームに変更がない場合はボタンを無効にし、変更が加えられた場合は有効にする方法について混乱しています。

4

1 に答える 1

1

簡単な解決策は、ビューがモデルの変更をリッスンするようにすることです。

initialize: function () {
  if(this.model){
    this.model.fetch({
      success: function(model, resp) {
        this.model._attributes = resp; // create a copy of the original attributes
        this.listenTo(this.model, 'change', function() {
          // when the model changes
          // maybe write some function to compare both
          if(_.isEqual(this.model._attributes, this.model.toJSON())) {
            // disable
          }
          else {
            // able
          }
        });
      }
    });
  }

そのため、データがサーバーから戻ってきたら、コピーを作成してから、モデルの変更をリッスンします。新しい属性が元の属性と等しい場合は、ボタンを無効にします。

于 2013-04-19T15:46:32.883 に答える