selctor 클래스를 기반으로 여러 div에 대해 완료되지 않은 스크립트를 실행하는 방법은 무엇입니까?

나는 Ractive js &을 사용하는 웹 페이지에서 특정 클래스의 요소에 대한 스크립트를 실행하려고합니다. 아래 샘플을 찾으십시오.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>

위 코드의 경우 콘솔에 하나의 항목 만 표시됩니다. 왜 이런 경우입니까? 컨테이너를 클래스로 갖는 모든 요소에 대해 완료되지 않은 스크립트를 실행하려면 어떻게해야합니까?

출처

2016-11-21 user657592

을 - 그것을 가지고 HEAD에 배치 prepped/before/BODY가 채워집니다. – flowtron

jsfiddle에서 이것을 재현 해 주시겠습니까? –

@flowtron - 머리에 스크립트를 배치해도 도움이되지 않습니다. 실제로 head 태그에 배치하면 콘솔에 아무 것도 기록하지 않습니다. – user657592

문제는 실제로 여러 요소로 Ractive를 시작할 수 없다는 것입니다. 아이디어는 래퍼에서 Ractive를 초기화 한 다음 부분으로 페이지를 빌드한다는 것입니다. 당신이 어떤 이유로 당신이 제안하는 일을하려면

,이 같은 한 페이지에 여러 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

나는 당신이 함수 내에서 ractive creation을 감싸고 주어진 클래스를 가진 모든 엘레멘트들에 적용 할 수 있다고 생각한다. jsfiddle를 포함한 답변에 이것을 추가했습니다. 이 함수는 멋진 인스턴스의 배열을 반환합니다. –

selctor 클래스를 기반으로 여러 div에 대해 완료되지 않은 스크립트를 실행하는 방법은 무엇입니까?

답변

관련 문제