hyperHTML : 루프의 일반 내용이 항상 전체로 렌더링되어 바인딩이 끊깁니다 (클릭 이벤트)

Question

hyperHTML을 사용하여 일부 문제가 생겼습니다 (어쩌면 일부 이해 문제 만있을 수 있습니다).

루프에 동적 콘텐츠가있는 경우 콘텐츠가 완전히 렌더링되어 바인딩이 손실됩니다 (document.body.innerHTML = content과 같이 hyperHTML이 아닌 것 같습니까?). 렌더링되는 내용을 클릭

function render() { 
 
    console.log('render'); 
 
    
 
    hyperHTML.bind(document.body) `start:<br> 
 
    ${[1,2,3].map(item => ` 
 
     count <button id="testbutton${item}">button${item}</button><br> 
 
    `)}<br> 
 
    press button2<br> 
 
    <button id="testbutton">Test Button</button><br> 
 
    last rendering ${new Date().toTimeString()}`; 
 
} 
 

 
function init() { 
 
    render(); 
 
    let self = this; 
 
    document.querySelector('#testbutton2').addEventListener('click',() => self.render()); 
 
    document.querySelector('#testbutton').addEventListener('click',() => self.render()); 
 
} 
 
window.addEventListener('load',() => init());

<script src="https://webreflection.github.io/hyperHTML/min.js"></script>

처음 button2 : 아래에있는 내 예제를 참조하십시오. 초기 바인딩이 아직 작동 중입니다. 내용이 다시 렌더링 된 후에는 청취자가 손실됩니다.

반면에 Test Button은 다시 렌더링되지 않습니다. 바인딩이 여전히 존재합니다.

누군가 나를 설명해 줄 수 있습니다. hypeHTML을 적절한 방법으로 사용하는 방법은 목록을 반복하여 설명 할 수 있습니다. 노드 내부의 콘텐츠를 렌더링 바인드, 및 와이어, 대신 콘텐츠를 만들 :

덕분에, hyperHTML에서 마티아스

Answer 1

는 기본적으로 두 개의 유틸리티가 있습니다.

와이어 방법은 당신에게 특정 오브젝트에 내용을 관계 할 수있는 기능을 제공하고, 이것은 당신의 조각의 누락 비트입니다.

실제로 문자열 배열을 반환하고 보간 값으로 배열 as described in the documentation은 html에 대한 명시 적 옵트 인이지만 DOM 노드가 아니라 문자열을 처리하는 것입니다.

또한 hyperHTML에서는 허용되지 않는 내부 속성과 같이 야생에서 보간법을 사용하기 때문에이 문자열을 hyperHTML 콘텐츠가 아닌 일반 템플릿 리터럴로 사용합니다 (문서의 부분 속성에 대해 읽음).

이러한 모든 문제를 즉시 해결하려면 동일한 항목 (개체 인 경우) 또는 변경되지 않는 참조 (hyperHTML 컨테이너 자체)를 연결하기 만하면됩니다.

내부 콘텐츠를 여러 번 연결하려는 경우 :id을 사용하면 N 개의 항목별로 N 개의 약한 관계를 가질 수 있습니다.

나는 created a Code Pen example이 있는데,이 모든 것을 원래 코드의 아주 적은 변화를 통해 보여줍니다.