Javascript 如何基于类选择器为多个div执行oncomplete脚本？_Javascript_Ractivejs

Javascript 如何基于类选择器为多个div执行oncomplete脚本？

javascript

Javascript 如何基于类选择器为多个div执行oncomplete脚本？,javascript,ractivejs,Javascript,Ractivejs,我有一个网页，它使用ractivejs&试图用一个特定的类为元素执行一个脚本。请查看以下示例： <body> <div class='container'></div> <div class='container'>Hello</div> <script> var ractive = new Ractive({ // The `el` option can be a node, an ID, or a C

我有一个网页，它使用ractivejs&试图用一个特定的类为元素执行一个脚本。请查看以下示例：

<body>
<div class='container'></div>
<div class='container'>Hello</div>
<script>
    var ractive = new Ractive({
      // The `el` option can be a node, an ID, or a CSS selector.
      el: '.container',

      oncomplete: function () {
       console.log("22");
      }
    });
</script>
</body>


你好
var ractive=新ractive({
//“el”选项可以是节点、ID或CSS选择器。
el:“.container”，
oncomplete:函数（）{
控制台日志（“22”）；
}
});

对于上面的代码，我只能在控制台中看到一个条目。为什么会这样？如何让ractive为所有以容器为类的元素执行oncomplete脚本？

问题是，您不能真正使用多个元素启动ractive。其思想是在包装器上初始化Ractive，然后用partials构建页面

如果出于某种原因想要执行您的建议，您可以在一个页面上创建多个Ractive实例，如下所示：

我相信使用css类选择器的选项是一个新选项，可能会让人困惑。大多数人似乎都在使用ID进行此用途

如果您真的想创建基于类的许多RADIVE实例，请考虑这个函数：

可能是因为DOM已经（大部分）存在在脚本运行后建立-将其放入HEAD中，以便在/BODY填充之前对其进行准备。您是否可以在JSFIDLE上复制此脚本？@flowtron-将脚本放入HEAD中没有任何帮助。事实上，当将其放入HEAD标记中时，它不会将任何内容记录到控制台中。@MartingToweis为每个容器都有一个新实例对。但是，我希望能够在没有冗余的情况下编写代码。我想您可以将抽象的创建封装在一个函数中，并将其应用于给定类的所有元素。将此添加到答案中，包括JSFIDLE。该函数将返回一个抽象实例数组。

var ractive = new Ractive({
    // The `el` option can be a node, an ID, or a CSS selector.
    el: '.c1',
    template: 'rendered 1',
    onrender: function () {
        console.log("11");
    }
})

var ractive = new Ractive({
    // The `el` option can be a node, an ID, or a CSS selector.
    el: '.c2',
    template: 'rendered 2',
    onrender: function () {
        console.log("22");
    }
})

function ractive_class (class_selector) {
    return $('.' + class_selector)
        .toArray()
        .map(function (element) {
            return new Ractive({
                el: element,
                template: 'rendered',
                onrender: function () {
                    console.log("rendered");
                }
            }
        )
    })
}

console.log(ractive_class('c'))