クラスselctorに基づいて、多くのdivのために完了していないスクリプトを実行するにはどうすればよいですか？

私は、Ractive js &を使用しているWebページで、特定のクラスを持つ要素のスクリプトを実行しようとしています。以下のサンプルを見つけてください：クラスselctorに基づいて、多くのdivのために完了していないスクリプトを実行するにはどうすればよいですか？

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

上記のコードでは、コンソールには1つのエントリしか表示されません。これはなぜですか？コンテナをクラスとして持つすべての要素に対して、不完全なスクリプトを実行するにはどうすればいいですか？

出典

2016-11-21 user657592

を - それを持っているHEADにそれを置きますprepped/before/BODYに入力されます。 – flowtron

おそらくこれをjsfiddleで再現できますか？ –

@flowtron - 頭の中にスクリプトを置くことは助けになりません。実際、headタグに置かれたときにコンソールに何も記録しません。 – user657592

問題は、本当に複数の要素でRactiveを開始できないということです。ラッパーでRactiveを初期化し、部分的にページを構築するという考え方です。

あなたには、いくつかの理由のためにあなたが提案している何をしたい場合は、このような1つのページに複数の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インスタンスを作成したい場合は、この機能を検討：DOMはすでにあるので、おそらく（主に）スクリプトを実行後に確立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'))

出典

2016-11-21 11:54:38

すべてのコンテナに新しいインスタンスを持たせることは一つの方法です。しかし、私は冗長性のないコードを書くことができるようにしたい。 – user657592

私は、関数内の猛烈な作成をラップして、与えられたクラスを持つすべての要素に適用できると思います。これをjsfiddleを含む答えに加えました。この関数は、猛烈なインスタンスの配列を返します。 –

クラスselctorに基づいて、多くのdivのために完了していないスクリプトを実行するにはどうすればよいですか？

答えて

関連する問題