vue.js との共存について
vue.js との共存について
久しぶりにmodxに戻ってまいりました。
vue.js を利用しましたがなかなかHello world さえ出来ずにくもんしていましたが…
そうだ、チャンクって{{}} のスタイルでvue.js とかぶってしまいます。
この抜け道を知っていらっしゃる方がいましたらご教授下さい
vue.js を利用しましたがなかなかHello world さえ出来ずにくもんしていましたが…
そうだ、チャンクって{{}} のスタイルでvue.js とかぶってしまいます。
この抜け道を知っていらっしゃる方がいましたらご教授下さい
vue.js との共存について
https://jp.vuejs.org/v2/guide/
vue.jsのドキュメントを確認しました。チャンク名として見た場合、チャンク名の先頭と末尾が半角スペースの場合はチャンクとして処理しない。というふうにするほうがよいでしょうか?
vue.jsのドキュメントを確認しました。チャンク名として見た場合、チャンク名の先頭と末尾が半角スペースの場合はチャンクとして処理しない。というふうにするほうがよいでしょうか?
vue.js との共存について
http://qiita.com/icoxfog417/items/49f7301be502bc2ad897
上記ページで、「Vue.jsのバインディングに使われる記号({{}})がテンプレートエンジン側のそれとバッティングすることがあります」として、その回避方法が紹介されています。MODX以外ではtwigやSmartyがこの書式だったと思いますが、ちゃんとVue.js側でも考えられているようですね。
でもVue.jsのコードをがっつり書いていくと、このようにカスタマイズした書き方だと、MODXを扱わない他の技術者さんがコードを見ると勘がずれて分かりにくいかもしれませんね。
上記ページで、「Vue.jsのバインディングに使われる記号({{}})がテンプレートエンジン側のそれとバッティングすることがあります」として、その回避方法が紹介されています。MODX以外ではtwigやSmartyがこの書式だったと思いますが、ちゃんとVue.js側でも考えられているようですね。
でもVue.jsのコードをがっつり書いていくと、このようにカスタマイズした書き方だと、MODXを扱わない他の技術者さんがコードを見ると勘がずれて分かりにくいかもしれませんね。
vue.js との共存について
ありがとうございます。
1.開発版の修正してくださった方どなたでしょう?ありがとうございました。
2.yamaさんありがとうございます。後ほど確認させていただきます、まずはお返事まで。
1.開発版の修正してくださった方どなたでしょう?ありがとうございました。
2.yamaさんありがとうございます。後ほど確認させていただきます、まずはお返事まで。
vue.js との共存について
すいません、間違ってssmxさんの元記事を編集してしまいました。
他によい方法を思いついたらまた連絡します
他によい方法を思いついたらまた連絡します
vue.js との共存について
こんにちは。
私のサイトもMODX+Vue.jsで作っています。
これは以前yamaさんから教えてもらった方法ですが、以下のプラグインを[3] OnWebPagePrerender に登録して
{ { name } } のようにスペースを挟んで記述するとMODXのタグをそのままソース上に表示出来るようになります。
これで Vue.js用の {{ Mustache }} を使う時に { { name } } という風に記述しています。
ちなみにこれが必要なのは inline-template、x-template などソースコード上に表示させる場合のみで、templateオプションや .vueファイルに記述する場合はスペースは必要ないです。
私のサイトもMODX+Vue.jsで作っています。
これは以前yamaさんから教えてもらった方法ですが、以下のプラグインを[3] OnWebPagePrerender に登録して
{ { name } } のようにスペースを挟んで記述するとMODXのタグをそのままソース上に表示出来るようになります。
コード: 全て選択
$src = array('[ [', '] ]', '[ !', '! ]', '[ *', '* ]', '[ (', ') ]', '{ {', '} }', '[ +', '+ ]', '[ ~', '~ ]', '[ ^', '^ ]');
$dist = array();
foreach($src as $v){
$dist[] = str_replace(' ', '', $v);
}
$modx->documentOutput = str_replace($src, $dist, $modx->documentOutput);
ちなみにこれが必要なのは inline-template、x-template などソースコード上に表示させる場合のみで、templateオプションや .vueファイルに記述する場合はスペースは必要ないです。
vue.js との共存について
パーサに改良を加えるとしたら
とかはどうでしょう?@ESCPARSEとか@ASISとか
コード: 全て選択
<@LITERAL>
{{ name }} をそのまま表示
<@ENDLITERAL>
vue.js との共存について
ありがとうございます、ちょっと仕事で飯を食えないほど忙しくて、見れなくて申し訳ありません
ちょっと期間空きますが必ず目を通します、ご協力頂いた方ありがとうございました
ちょっと期間空きますが必ず目を通します、ご協力頂いた方ありがとうございました
vue.js との共存について
あれ、投稿したつもりが消えてしまいました。
まず手軽そうだったyamaさんのリテラル指定で行っていました。
パースの使い方が間違っているのでしょうか?
…大前提としてMODxはとても初心者です。
またvjeは今回始めて触っています。
まず手軽そうだったyamaさんのリテラル指定で行っていました。
コード: 全て選択
<script>
var myModel = {
name: "Ashley",
age: 24
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
</script>
<div id="my_view">
<@LITERAL>
{{ name }} is {{ age }} years old.
<@ENDLITERAL>
<!-- Evaluated to "Ashley is 24 years old" -->
</div>
コード: 全て選択
<div id="my_view">
<@LITERAL>
is years old.
<@ENDLITERAL>
<!-- Evaluated to "Ashley is 24 years old" -->
</div>
…大前提としてMODxはとても初心者です。
またvjeは今回始めて触っています。
vue.js との共存について
<@LITERAL> は提案で、まだ組み込まれてないのではないでしょうか?
個人的にも<@LITERAL>こういう機能あると嬉しいです。
個人的にも<@LITERAL>こういう機能あると嬉しいです。
vue.js との共存について
了解です、後ほど実装します
vue.js との共存について
https://github.com/modxcms-jp/evolution ... evelop.zip
実装しました。試していただいてよいでしょうか?
実装しました。試していただいてよいでしょうか?
vue.js との共存について
ありがとうございます。
テスト用サイトですがモディファイアやネストなどいくつか使用パターンを試してみて特に問題ないようでした。
テスト用サイトですがモディファイアやネストなどいくつか使用パターンを試してみて特に問題ないようでした。