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

我有一个使用Ractive js &的网页尝试为特定的类执行元素的脚本。请找到下面的示例：如何基于类选择器为许多div执行oncomplete脚本？

<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>

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

来源

2016-11-21 user657592

- 把它放到HEAD拥有它准备/之前/ BODY得到填充。 – flowtron

你可以在jsfiddle上重现这个吗？ –

@flowtron - 将脚本放置在头部并不会帮助。事实上，放置在头部标记中时，它不会将任何内容记录到控制台。 – user657592

问题是，你不能真正启动多个元素的Ractive。这个想法是，你在包装器上初始化Ractive，然后用partials构建你的页面。

如果您由于某种原因想要做你的建议是什么，你可以在一个页面上创建多个Ractive情况是这样的：http://jsfiddle.net/7yxnd5wb/1/

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"); 
    } 
})

我相信使用CSS类选择的选项是一个新的并可能令人困惑。大多数人似乎使用ID来进行这种使用。

如果你真的想创建一个基于类的许多ractive情况下，可以考虑这样的功能：http://jsfiddle.net/7yxnd5wb/2/

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'))

可能是因为DOM已经（大部分）建立运行脚本后

来源

2016-11-21 11:54:38

每个容器都有一个新实例是一种方法。但是，我希望能够编写没有冗余的代码。 – user657592

我想你可以在一个函数中包装rative创建并将其应用于给定类的所有元素。添加了这个答案，包括jsfiddle。该函数将返回一个ractive实例的数组。 –

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

回答

相关问题