1

我有一个简单的地址表单，利用了很棒的新数据链接插件。这是一个简单的创建/编辑场景，如果存在 ID，则执行 ajax 调用以填充表单，如果不存在则执行空白表单。

dataComplete : function(data){
        $self.step1Data = data;
        $self.Templates.step1('#step1form', $self.step1Data);
        $('#step1form').link($self.step1Data);
    }

在任何一种情况下都会调用上述函数，以将表单链接到 step1Data 对象（如果我没有任何东西可以填充表单，我只需将一个空的 JavaScript 对象传递给它）。您在上面看到的“模板”对象是一个简单的包装器，它使用了同样很棒的 jQuery 模板插件。

这在编辑时效果很好；.link() 完全符合形式，一切都很好。处理空表单时会出现问题：除了 State 选择列表之外的每个字段都是链接的。这是选择列表的 html：

<select class="state" id="State" name="State">
    <option value="UT">Utah</option>
</select>

class 和 id 命名约定与表单的其他部分相同，但 Data Link 似乎并没有自己注意到它。我可能可以将其配置为手动执行此操作，但为了清洁起见，如果我能侥幸逃脱的话，我不希望这样做。任何想法为什么它不链接选择列表？

4

1 回答 1

0

好的，想通了。根据 Schalck 的这篇非常详细的文章，当使用 Data Link 将空表单绑定到对象时，文档暗示的行为并不准确。

本质上，Data Link 仅设置链接和事件以在对象内创建属性；在触发更改事件之前，它实际上并没有实现它们之间的双向同步。换句话说，直到用户在表单域中真正输入了一些东西。

这种行为对于大多数控件来说都很好（并且出于可能的性能原因，等待用户输入很有意义）。问题是当前文档暗示了其他方面。考虑到这一点，我只是在调用 .link() 之后触发了表单中选择列表的更改事件，如下所示：

    dataComplete : function(data){
        $self.step1Data = data;
        $self.Templates.step1('#step1form', $self.step1Data);
        $('#step1form').link($self.step1Data);

        //trigger the select lists
        $('[name=State]').trigger('change');
        $('[name=Type]').trigger('change');
    }

如有必要，您还可以简单地迭代表单中的输入字段并触发它们的所有更改事件。下面是一种方法，我确信有更好的方法（这里的 DOM 遍历是form -> ul -> li -> inputs）。

    $('.stepForm').children().children('input').trigger('change')
于 2011-02-16T03:53:55.933 回答