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

【问题标题】：Simple client-side rendering not working简单的客户端渲染不起作用
【发布时间】：2017-04-04 22:53:35
【问题描述】：

我正在尝试在我的智能组件中触发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

【问题讨论】：

你能console.log(button)吗？常量是块作用域的，所以button 可能在onMount 作用域中未定义。
@Razzildinho 更新了！
@Razzildinho 客户端好像没找到模块。

标签： javascript marko

【解决方案1】：

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

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

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

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

【讨论】：