2017-04-04 9 views
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

私も投げ縄使用している、私はそれが働いていない理由は、これがあるかもしれないと思います。私は、lassoがコンポーネントをバンドルしてクライアントに送信していないと考えています。マルコv4の中に制限によるものですhttp://markojs.com/docs/lasso/#client-side-rendering

+0

あなたは 'console.log(ボタン)'できますか?定数はブロックスコープであるため、 'onMount'スコープで' button'が定義されていない可能性があります。 – Razzildinho

+0

@Razzildinho更新済み! –

+0

@Razzildinhoクライアント側でモジュールが見つからないようです。 –

答えて

0

は、私はまた、次をお読みください。 Marko v4はブラウザにHTML文字列ではなく[V] DOMノードを表示するように設計されています。

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

注:UIコンポーネントが複数のトップをレンダリングする可能性があるため、DocumentFragmentノードを返しgetNode()あなたが本当にHTML文字列を必要とする場合は、次のようなコードを使用してDOMノードからHTML文字列を取得する必要がありますレベルのHTML要素。私たちは、DocumentFragmentのうちの最初のノードを取得し、それはあなたが興味のあるHTML要素ノードであると仮定して、上記のコードでfirstChildを使用しています。

ということで、私たちはこれを明確にするためにドキュメントを更新(またはtoString()を実装する必要があります本当に必要ないはずですが)。

+0

私は理解しています、明らかな答えのおかげでパトリック! –

関連する問題