hyperHTML：循環中的通用內容總是呈現完整並丟失它的綁定（單擊事件）

我使用hyperHTML（可能只有一些理解問題）存在一些問題。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。

謝謝，的Matthias

來源

2017-09-15 Matthias Reining

在hyperHTML基本上有兩種實用程序：綁定，這使得一個節點內的內容，並且絲，其代替創建內容。

電線的方法爲您提供了其內容涉及到具體的對象的能力，這是你的代碼片段的缺失位。

你確實只是返回一個字符串數組，而一個數組作爲插值，as described in the documentation，是一個明確的html選擇，但它只是處理字符串，而不是DOM節點。

您也正在使用該字符串作爲常規模板文字，而不是hyperHTML內容，因爲您正在使用插值，比如內部屬性，這在hyperHTML中是不允許的（請參閱文檔中的部分屬性）。

要一次解決所有這些問題，您只需連線相同的項目（如果是對象）或不會更改的參考（如hyperHTML容器本身）。

由於您想多次關聯內部內容，因此您只需使用:id，這樣每N個項目就會有N個弱關係。

我有created a Code Pen example，通過對原始代碼進行非常少的更改來顯示所有這些。

來源

2017-09-16 08:35:03

嗨安德烈，非常感謝您的反饋意見和您在Code Pen上的傑出範例。現在很明顯:-) –

https://codepen.io/janat08/pen/wpWgbO 我試圖在每次更新之前更改數組，沒有好的東西出來。 –

hyperHTML：循環中的通用內容總是呈現完整並丟失它的綁定（單擊事件）

回答

相關問題