将javascript对象绑定到DOM

Question

我正在尝试创建一个javascript对象来跟踪表单的状态。我的第一个尝试是一个冗长的“过程性”jquery解决方案，我遍历每个表单域，测试它是否设置为'All'，删除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执行that...you有两个主要的选择:在每次更改时更新表单模型(与您所拥有的类似)，或者只是在表单操作时收集所有字段数据(例如:按下send按钮)。

Option1:随时更新模型！

您必须对表单中的每个属性有一个良好的引用(id)，这样才能根据需要创建不断更新表单模型所需的侦听器。类似于您所做的：

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

对于每个表单字段，您应该添加一个前缀，可能是为了指明属性的位置，因为如果您在同一个页面中使用多个表单，并在同一对象中注册所有的监视器，那么它可能会变得混乱，真的很快。

您的表单发送按钮应该包含如下内容

onclick="retrieveMyFormModel()"

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

Option2:收集最终中的所有数据

在用户单击send按钮之前，直到最后都不执行任何操作。遍历所有字段，创建表单模型并将其发送。