2

我正在使用主干、下划线和主干.stickit 库创建类似这样的形式。我的屏幕大部分看起来有点像这样。

表单html

<form id="main">
<div>
    <label for="words">words: <input name="words" type="text"/></label>     
</div>
 <div>
    <label for="type">type: <input name="type" type="text"/></label>     
</div>

    <div>
        <input id="okButton" class="btn" value="save"/>
   </div>

主干模型/视图

 var app = {
 Model: Backbone.Model.extend({}),
 View: Backbone.View.extend({
    initialize: function() {
        this.setElement($('#main'));
    },
    bindings: {
        'input[name=words]': 'words',
        'input[name=type]': 'type',
        'input#okButton': {
          attributes: [{
            name: 'disabled',
            observe:['type','words'],
            onGet: 'okButtonDisabled'
          }],
        }
    },
    okButtonDisabled: function(words) {
        return words[0].length > 0 ? null : true;
    },
    addDisabledClass: function(words) {
        return words[0].length > 0 ? "" : "disabled";
    },
    render: function() {
        this.stickit();
    }
 })
 };

当用户在类型字段中输入一些值时，“保存”按钮被启用，否则它被禁用。

上面的例子只绑定类型字段。它不适用于“单词”字段。

我正在做的事情

我正在处理的表单的 jsfiddle 在这里。

表单html

 <form id="main">
 <div>
     <label for="words">words: <input name="words" type="text"/></label>     
 </div>
 <div>
     <label for="type">type: <input name="type" type="text"/></label>     
 </div>
 </form>

模型/视图代码

var app = {
Model: Backbone.Model.extend({}),
View: Backbone.View.extend({
    initialize: function() {
        this.setElement($('#main'));
    },
    bindings: {
        'input[name=words]': 'words',
        'input[name=type]': 'type',
        'input#okButton': {
          attributes: [{
            name: 'disabled',
            observe:['type','words'],
            onGet: 'okButtonDisabled'
          }],
        }
    },
    okButtonDisabled: function(words) {
        return words[0].length > 0 ? null : true;
    },
    addDisabledClass: function(words) {
        return words[0].length > 0 ? "" : "disabled";
    },
    render: function() {
        this.stickit();
    }
  })
 };
 var model = new app.Model({
   words: "apple",
   type: "fruit"
 });
 var view = new app.View({
    model: model
 });
 view.render();

我想做的是：

  • 最初将“保存”按钮设置为禁用。
  • 如果用户对任何表单字段进行任何更改，则必须启用“保存”按钮。
  • 但是，如果用户在任何字段中输入内容以启用“保存”按钮，并再次使该字段与原始字段相同，则必须再次禁用“保存”按钮。即将“apple”编辑为“apppleee”，以便启用“保存”，然后将“appleee”反转回“apple”以再次禁用“保存”按钮。

提前感谢您的帮助。

4

2 回答 2

2

”最初将“保存”按钮设置为禁用。 ”
这可以通过 HTML 标记或在initialize您的视图（或类似）的方法中完成。

"如果用户对任何表单字段进行任何更改，则必须启用“保存”按钮。但是，如果用户在任何字段中输入内容以启用“保存”按钮，并再次使该字段与原始字段相同，则“保存” " 按钮必须再次禁用。即将"apple" 编辑为"apppleee" 以启用"save"，将"appleee" 反转回"apple" 以再次禁用"save" 按钮。 "
如何启用/禁用保存按钮用户更改表单内容时的主干表单视图也应该为您提供该部分的解决方案。
基本上，您将模型的原始状态存储为myView._model = myView.model.toJSON(). 当你的模型改变时，this.model.toJSON()this._model_.isEqual

于 2013-04-24T14:40:47.927 回答
2

我建议在您的模型中添加一些逻辑（函数），以检查对象值是否符合其默认值。然后，在您的okButtonDisabled方法中，调用模型方法来检查默认值。这是您提供的代码中的一个示例：

var app = {
    Model: Backbone.Model.extend({
        defaults: {
            words: "apple",
            type: "fruit"
        },

        isDefault: function(key) {
            return this.get(key) === this.defaults[key];
        }
    }),
    View: Backbone.View.extend({
        initialize: function() {
            this.setElement($('#main'));
        },
        bindings: {
            'input[name=words]': 'words',
            'input[name=type]': 'type',
            'input#okButton': {
              attributes: [{
                name: 'disabled',
                observe:['type','words'],
                onGet: 'okButtonDisabled'
              }],
            }
        },
        okButtonDisabled: function(words) {
            return (!this.model.isDefault("words") ||
                    !this.model.isDefault("type")) ? null : true;
        },
        addDisabledClass: function(words) {
            console.log("is this neccessary?");
            return (!this.model.isDefault("words") ||
                    !this.model.isDefault("type")) ? "" : "disabled";
        },
        render: function() {
            this.stickit();
        }
    })
};

var view = new app.View({model:new app.Model()});
view.render();

修改后的 JSFiddle


如果您有很多字段，则可以更改isDefault方法以接受键数组。然后，循环遍历这些键，如果任何键与其默认值不匹配，则返回 false。就像是：

Model: Backbone.Model.extend({
    isDefault: function(keys) {
        for (var i = 0; i<keys.length; i++) {
            if (this.get(keys[i]) !== this.defaults[keys[i]]) {
                return false;
            }
        }
        return true;
    }
});

View: Backbone.View.extend({
    okButtonDisabled: function(words) {
        return !this.model.isDefault(["words", "type"]) ? null : true;
    }
});


编辑：

如果您可以假设模型中的所有属性都与表单输入相关联，那么您可以遍历每个属性并检查差异。像这样的东西：

Model: Backbone.Model.extend({
    isDefault: function(keys) {
        for (var key in this.attributes) {
            if (this.get(key) !== this.defaults[key]) {
                return false;
            }
        }
        return true;
    }
});

View: Backbone.View.extend({
    okButtonDisabled: function(words) {
        return !this.model.isDefault() ? null : true;
    }
});

更新了抽象的 JSFiddle

于 2013-04-24T15:28:47.077 回答