javascript - 动态实例化对象(Mistic 查询生成器)

Question

我是 JavaScript 新手，主要关注 Java/PHP 开发。我过去构建的 JS 应用程序非常简陋、无法测试且无法扩展。

我现在正在尝试创建一个以更合适的方式与数据交互的应用程序。基本上，我正在构建一个用户界面，用于创建我们的支持团队和最终用户可以访问的规则/操作。应用程序的逻辑包含大量 bool 和逻辑运算符，只需要满足一些任意的条件集，然后将应用某些操作。

所以，我几乎已经选择了查询生成器类型的应用程序，而且我喜欢 Mistic's work 。不幸的是，我们没有 Node.js 服务器。因此，我开始寻找使用普通 JS/jQuery 来实现此功能的方法。一次迭代使用了 Knockout.js。然而，我发现该 API 很难使用。

现在，我找到了这个JSFiddle ，它在独立版本中使用了 Mistic 的工作。我更喜欢使用它，但我无法完全拼凑的一件事是如何动态创建多个查询生成器。 (规则将显示在表格中，如第二个链接所示，我需要一个“添加行”按钮)。

$('#builder').queryBuilder({

sortable: true,

filters: [{
    id: 'core_ID',

我尝试使用 jQuery .each() 函数来创建绑定(bind)到具有构建器类的每个元素的查询构建器，但无济于事。

$.each('.builder').queryBuilder({

你们能告诉我如何动态创建新的 QueryBuilder 对象吗？如第三个链接所示？

Answer 1

您使用.builder作为选择器，这意味着您选择具有class="builder"属性的所有元素。

如果是这样，那么您应该能够只调用 $('.builder').queryBuilder(... 并且它应该使用具有 builder 类的所有元素

编辑:事实上确实如此。但是 cakephp 查询生成器不允许它(无论出于何种原因)。因此，您必须按照我描述的方式使用每个。

如果你想使用each函数，你可以这样:

$( ".builder" ).each(function() {
  $( this ).queryBuilder(...);
});

说明:

$(".builder") 选择所有具有 class="builder" 属性的元素。.each 迭代这些元素。在传递给 each this 的函数内部包含 native DomElement(不是 jquery 元素)。因此 $(this) 获取 DomElement 的 jQuery 元素，并在其上调用 .queryBuilder。

你可以在几乎任何 jQuery 元素上调用 .queryBuilder，除非它是元素数组(它会抛出错误)。

所以基本上任何选择器+each我使用它的方式都应该工作。

这是一个使用 4 个查询构建器的示例的工作 fiddle : http://jsfiddle.net/ap9gxo4L/42/