簡單的客戶端呈現不起作用

我試圖在智能組件中觸發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

來源

2017-04-04 Karl Morrison

你可以'console.log（按鈕）'？常量是塊的作用域，所以'button'可能在'onMount'範圍內是未定義的。 – Razzildinho

@Razzildinho更新！ –

@Razzildinho它似乎沒有在客戶端找到模塊。 –

這是由於馬爾科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-04 14:53:35

我明白，感謝帕特里克的明確答覆！ –

簡單的客戶端呈現不起作用

回答

相關問題