0

我有从主干模型获取数据的表格。当表格显示时，它们的初始值设置为骨干模型。现在，如果编辑了任何字段，我想在对字段进行任何更改后立即启用“保存”按钮。但是，如果您更改字段值并再次将其更改为原始值，它应该再次禁用允许保存模型的“保存”按钮。我想实现如这个 jsfiddle 所示：http: //jsfiddle.net/qaf4M/ 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 回答