如何启用/禁用保存骨干表单视图按钮时，用户的变化形式的内容 [英] How to enable/disable save button of backbone form-view when user changes form content

问题描述

我有形成从骨干模型获取数据。当所示的形式，他们已初步值设置为主干模式。现在，如果任何字段被编辑，我想立刻只要任何更改是由到现场启用保存按钮。但是，如果你改变字段的值，并再次将其改为原来的，它应该再次禁用保存按钮，允许保存model.I想达到为一体，在此的jsfiddle所示：的 http://jsfiddle.net/qaf4M/2/

I have form which gets data from backbone model. When the form is shown, they have initially value set to backbone model. Now, if any field is edited, i want to enable "save" button immediately as soon as any changes is made to field. However, if you change field value and again change it to original, it should again disable the "save" button that allows to save model.I want to achieve as one shown in this jsfiddle :http://jsfiddle.net/qaf4M/2/

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

I am using backbone.js and backbone.stick (http://nytimes.github.io/backbone.stickit/) to bind model to template.

创建视图与模型为参数如下：

I create view as follows with model as parameter

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

我的模型值是这样的：

MY model value is something like this:

 {
   "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和变革已经取得时启用。

I am confused where should i bind event and how or what is proper way to know the user has chagne some value and accordingly disable button when there is no cahnge in form and enable when change has been made.

推荐答案

一个简单的解决办法是让你的看法听你的模型的变化：

A simple solution would be to make your view listen to your model's changes:

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

所以，当数据来自服务器回来，你创建一个副本，然后听你的模型的变化。如果新属性等于原，禁用按钮。

So, when the data comes back from the server, you create a copy, and then listen to your model's changes. If the new attributes equal the original, disable the button.

这篇关于如何启用/禁用保存骨干表单视图按钮时，用户的变化形式的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！