0

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

4

1 回答 1

0

这是由于 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()即使确实不需要它也可以实施）。

于 2017-04-04T14:53:35.823 回答