Question

我有从骨干模型获取数据的表单。当显示表单时，它们最初的值设置为主干模型。现在，如果编辑了任何字段，我想在对字段进行任何更改后立即启用“保存”按钮。但是，如果您更改字段值并再次将其更改为原始值，则应再次禁用允许保存模型的“保存”按钮。我希望实现此jsfiddle中显示的值：http://jsfiddle.net/qaf4M/2/

我使用backbone.js和backbone.stick（http://nytimes.github.io/backbone.stickit/）将模型绑定到模板。

我使用model作为参数

创建视图如下

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>

我很困惑我应该在哪里绑定事件以及如何或者什么是正确的方式来知道用户已经chagne一些值并因此在窗体中没有cahnge时禁用按钮并在更改时启用。

Answer 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
          }
        });
      }
    });
  }

因此，当数据从服务器返回时，您创建一个副本，然后听取模型的更改。如果新属性与原始属性相同，请禁用该按钮。

如何在用户更改表单内容时启用/禁用主干表单视图的保存按钮

1 个答案: