简单的客户端渲染不起作用

Question

我正在尝试在我的智能组件中触发 onMount 时呈现组件。服务器似乎正确呈现组件但是当 onMount 在客户端上触发时它不呈现，我得到一个简单的 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
}

我需要此处所述的组件：http://markojs.com/docs/rendering/#rendering

我也在使用套索，我怀疑这可能是它不起作用的原因。我怀疑套索没有捆绑组件并将其发送给客户端。

我还阅读了以下内容：http://markojs.com/docs/lasso/#client-side-rendering

Answer 1

这是由于 Marko v4 的限制。 Marko v4 旨在在浏览器中呈现 [V]DOM 节点而不是 HTML 字符串。如果您确实需要 HTML 字符串，则需要使用类似于以下的代码从 DOM 节点获取 HTML 字符串：

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

注意：getNode() returns 一个 DocumentFragment 节点，因为 UI 组件可能呈现多个顶级 HTML 元素。我们在上面的代码中使用 firstChild 从 DocumentFragment 中获取第一个节点，并假设这是您感兴趣的 HTML 元素节点。

话虽如此，我们应该更新文档以明确这一点（或实现 toString()，即使它确实不需要）。

简单的客户端渲染不起作用

Simple client-side rendering not working

javascript

marko