Le rendu côté client simple ne fonctionne pas

Question

J'essaie de rendre un composant lorsque le onMount est déclenché dans mon composant intelligent. Le serveur semble rendre le composant correctement mais quand onMount est déclenché sur le client il ne rend pas, j'obtiens un simple undefined.

const button = require('src/client/components/a-button'); 
console.log(button); // --> { path: '/home/karl/dev/instanty/node/src/client/components/a-button.marko.js', _: [Getter/Setter], '$__shouldBuffer': true, meta: {} } 


const htmlServer = button.renderToString({ label: 'Click me!' }); // <-- works 
console.log(htmlServer); 

module.exports = class { 
    onMount() { 
    console.log(button); // --> Template {path: undefined, meta: undefined, _: function} 

    const html = button.renderToString({ label: 'Click me!' }); // <-- does not work 
    console.log(html); 
    } 
    //... more code 
} 

J'exige le composant comme indiqué ici: http://markojs.com/docs/rendering/#rendering

J'utilise aussi Lasso, je soupçonne que cela pourrait être la raison pour laquelle il ne fonctionne pas. Je soupçonne que le lasso n'emballe pas le composant et ne l'envoie pas au client.

Je lis également ce qui suit: http://markojs.com/docs/lasso/#client-side-rendering

Answer 1

Cela est dû à une limitation de Marko v4. Marko v4 a été conçu pour rendre les nœuds DOM [V] et non les chaînes HTML dans le navigateur. Si vous avez vraiment besoin de la chaîne HTML, vous devrez obtenir la chaîne HTML à partir du nœud DOM en utilisant un code similaire à ce qui suit:

const html = button.renderSync({ label: 'Click me!' }) 
    .getNode().firstChild.outerHTML; 

REMARQUE: getNode() retourne un noeud DocumentFragment parce qu'un composant d'interface utilisateur peut rendre plusieurs top- éléments HTML de niveau. Nous utilisons firstChild dans le code ci-dessus pour obtenir le premier noeud de la DocumentFragment et supposons que est le nœud d'élément HTML qui vous intéresse.

Cela dit, nous devrions mettre à jour les documents que ce soit clair (ou mettre en œuvre toString() même si cela ne devrait vraiment pas être nécessaire).