Question

我正在尝试创建一个跟踪表单状态的javascript对象。我的第一个尝试是一个冗长的“程序”jquery解决方案，我循环遍历每个表单字段，测试它是否设置为“全部”，删除active类，或者如果它不存在则添加它。这是一个简短的版本：

function activeClass() {
  if(this.val() === 'All') {
    $(this).parent().removeClass('active');
  }
  $('#content-filter select', context).foreach(function() {
    if(this.val() !== 'All') {
      this.addClass('active');
    }
  });
}

我们也做了很多其他的事情，所以代码变得越来越长。我想要采取的下一个方向是创建一个单独的对象来跟踪表单状态，并使用事件监听器在表单状态发生变化时更新表单状态。

formState = {
    featured: false,
    all: false,
    category: 'All',
    topics: 'All',
    audience: 'All',
    date: {value: '', min: '', max: '', filter_op: '='},
  };

我正在努力的部分是如何将对象绑定到DOM。我的第一个倾向是做这样的事情：

$('select').on('change', function() {
    formState[$(this).attr('id')] = $(this).val();
  });

这里的问题是select的id必须与属性匹配。另外，我被告知这样做的方法是使用getter和/或setter方法来更改这些值。我对这意味着什么有所了解，但我感到困惑的是那些被绑定到DOM的方式。

Answer 1

救生建议：学习一个有助于数据绑定的框架，否则你的代码会变得很多并且变得难以维护。 I will leave here some suggestions

现在，使用jQuery来做到这一点......你有两个主要的大选择：在每次更改时更新表单模型（类似于您拥有的）或只是在表单操作时收集所有字段数据（例如：按下发送按钮）。

选项1：始终更新模型！

您必须对表单中的每个属性都有一个很好的引用（id），这样您就可以创建所需的侦听器，以便根据需要不断更新表单模型。与你的做法类似：

$('#'+fieldId).on('change', function() {
    var myNewValue =  $('#'+fieldId ).getValue();
    updateMyFormModel(fieldId, newValue);
});

对于每个表单字段，您应该添加一个前缀，可能表示该属性的位置，因为如果您在同一页面中使用多个表单并在同一对象中注册所有观察者，它可能会变得混乱，非常快。

您的表单发送按钮应该具有类似

的内容

onclick="retrieveMyFormModel()"

您只需获取不断更新的表单模型并将其发送到服务器。

选项2：最后收集所有数据

直到最后用户点击发送按钮才能执行任何操作。浏览所有字段，创建表单模型并发送。

将javascript对象绑定到DOM

1 个答案: