ページ 11

vue.js との共存について

Posted: 2017年6月16日(金) 23:24
by ssmx
久しぶりにmodxに戻ってまいりました。

vue.js を利用しましたがなかなかHello world さえ出来ずにくもんしていましたが…

そうだ、チャンクって{{}} のスタイルでvue.js とかぶってしまいます。

この抜け道を知っていらっしゃる方がいましたらご教授下さい

vue.js との共存について

Posted: 2017年6月17日(土) 16:30
by yama
https://jp.vuejs.org/v2/guide/
vue.jsのドキュメントを確認しました。チャンク名として見た場合、チャンク名の先頭と末尾が半角スペースの場合はチャンクとして処理しない。というふうにするほうがよいでしょうか?

vue.js との共存について

Posted: 2017年6月17日(土) 17:25
by yama
http://qiita.com/icoxfog417/items/49f7301be502bc2ad897
上記ページで、「Vue.jsのバインディングに使われる記号({{}})がテンプレートエンジン側のそれとバッティングすることがあります」として、その回避方法が紹介されています。MODX以外ではtwigやSmartyがこの書式だったと思いますが、ちゃんとVue.js側でも考えられているようですね。
でもVue.jsのコードをがっつり書いていくと、このようにカスタマイズした書き方だと、MODXを扱わない他の技術者さんがコードを見ると勘がずれて分かりにくいかもしれませんね。

vue.js との共存について

Posted: 2017年6月19日(月) 10:13
by ssmx
ありがとうございます。
1.開発版の修正してくださった方どなたでしょう?ありがとうございました。
2.yamaさんありがとうございます。後ほど確認させていただきます、まずはお返事まで。

vue.js との共存について

Posted: 2017年6月19日(月) 11:13
by yama
すいません、間違ってssmxさんの元記事を編集してしまいました。
他によい方法を思いついたらまた連絡します

vue.js との共存について

Posted: 2017年6月20日(火) 04:06
by hisato
こんにちは。
私のサイトも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);
これで Vue.js用の {{ Mustache }} を使う時に { { name } } という風に記述しています。
ちなみにこれが必要なのは inline-template、x-template などソースコード上に表示させる場合のみで、templateオプションや .vueファイルに記述する場合はスペースは必要ないです。

vue.js との共存について

Posted: 2017年6月20日(火) 13:50
by yama
パーサに改良を加えるとしたら

コード: 全て選択

<@LITERAL>
{{ name }} をそのまま表示
<@ENDLITERAL>
とかはどうでしょう?@ESCPARSEとか@ASISとか

vue.js との共存について

Posted: 2017年6月21日(水) 12:39
by ssmx
ありがとうございます、ちょっと仕事で飯を食えないほど忙しくて、見れなくて申し訳ありません
ちょっと期間空きますが必ず目を通します、ご協力頂いた方ありがとうございました

vue.js との共存について

Posted: 2017年6月23日(金) 10:09
by ssmx
あれ、投稿したつもりが消えてしまいました。
まず手軽そうだった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 との共存について

Posted: 2017年6月26日(月) 15:30
by hisato
<@LITERAL> は提案で、まだ組み込まれてないのではないでしょうか?
個人的にも<@LITERAL>こういう機能あると嬉しいです。

vue.js との共存について

Posted: 2017年6月26日(月) 18:42
by yama
了解です、後ほど実装します

vue.js との共存について

Posted: 2017年6月27日(火) 09:55
by yama
https://github.com/modxcms-jp/evolution ... evelop.zip
実装しました。試していただいてよいでしょうか?

vue.js との共存について

Posted: 2017年6月27日(火) 17:22
by hisato
ありがとうございます。
テスト用サイトですがモディファイアやネストなどいくつか使用パターンを試してみて特に問題ないようでした。