绑定骨干表单视图ui到模型更改以启用和禁用"保存"按钮

binding backbone form view UIto model change to enable and disable "save" button

本文关键字：quot 启用 按钮 保存 表单 视图 ui 模型 绑定      更新时间：2023-09-26

我正在创建这样的形式使用骨干，下划线和骨干。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();
    }
 })
 };

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

上面的例子只绑定类型字段。它对"words"字段不起作用。

我正在做的事情

我正在工作的形式的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"编辑为"appleee"，使"保存"功能启用，并将"appleee"反向编辑为"apple"，再次禁用"保存"按钮。

提前谢谢你的帮助。

我建议在你的模型中添加一些逻辑(函数)来检查对象的默认值。然后，在您的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中的所有属性都与表单输入相关联，那么您可以遍历每个属性并检查差异。像这样:

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

"初始设置"保存"按钮为禁用。"
这可以通过HTML标记或视图(或类似的)的initialize方法来完成。

"如果用户对任何表单字段做了任何更改，它必须启用"保存"按钮。但是，如果用户在任何字段中输入内容，使"保存"按钮启用，并且再次使字段与原始字段相同，则必须再次禁用"保存"按钮。即将"apple"编辑为"appleee"，使"保存"功能启用，并将"appleee"反向编辑为"apple"，再次禁用"保存"按钮。
当用户更改表单内容时，如何启用/禁用主干表单视图的保存按钮也应该给你一个解决方案。
基本上，您将模型的原始状态存储为myView._model = myView.model.toJSON()。当你的模型改变时，你比较this.model.toJSON()和this._model(与_.isEqual的帮助或只是检查一些属性)，并相应地启用/禁用你的按钮。

相关文章：