Простой рендеринг на стороне клиента не работает

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/

Я также использую лассо, я подозреваю, что это может быть, почему это не работает. Я подозреваю, что Лассо не связывает компонент и не отправляет его клиенту.

Я также прочитал следующее: http://markojs.com/docs/lasso/

Answer 1

Это связано с ограничением в Marko v4. Marko v4 был разработан для отображения [V]DOM-узлов, а не HTML-строк в браузере. Если вам действительно нужна строка HTML, вам нужно получить строку HTML из узла DOM, используя код, подобный следующему:

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

НОТА: getNode() возвращает DocumentFragment узел, потому что компонент пользовательского интерфейса может отображать несколько элементов HTML верхнего уровня. Мы используем firstChild в приведенном выше коде, чтобы получить первый узел из DocumentFragment и предположим, что это интересующий вас узел элемента HTML.

С учетом сказанного, мы должны обновить документы, чтобы прояснить это (или реализовать toString() хотя это действительно не нужно).