vue.js との共存について

質問全般・改善要望
返信する
ssmx
メンバー
メンバー
記事: 12
登録日時: 2017年6月16日(金) 23:21

vue.js との共存について

投稿記事 by ssmx »

久しぶりにmodxに戻ってまいりました。

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

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

この抜け道を知っていらっしゃる方がいましたらご教授下さい
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

vue.js との共存について

投稿記事 by yama »

https://jp.vuejs.org/v2/guide/
vue.jsのドキュメントを確認しました。チャンク名として見た場合、チャンク名の先頭と末尾が半角スペースの場合はチャンクとして処理しない。というふうにするほうがよいでしょうか?
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

vue.js との共存について

投稿記事 by yama »

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

vue.js との共存について

投稿記事 by ssmx »

ありがとうございます。
1.開発版の修正してくださった方どなたでしょう?ありがとうございました。
2.yamaさんありがとうございます。後ほど確認させていただきます、まずはお返事まで。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

vue.js との共存について

投稿記事 by yama »

すいません、間違ってssmxさんの元記事を編集してしまいました。
他によい方法を思いついたらまた連絡します
アバター
hisato
メンバー
メンバー
記事: 71
登録日時: 2012年8月18日(土) 20:21

vue.js との共存について

投稿記事 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ファイルに記述する場合はスペースは必要ないです。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

vue.js との共存について

投稿記事 by yama »

パーサに改良を加えるとしたら

コード: 全て選択

<@LITERAL>
{{ name }} をそのまま表示
<@ENDLITERAL>
とかはどうでしょう?@ESCPARSEとか@ASISとか
ssmx
メンバー
メンバー
記事: 12
登録日時: 2017年6月16日(金) 23:21

vue.js との共存について

投稿記事 by ssmx »

ありがとうございます、ちょっと仕事で飯を食えないほど忙しくて、見れなくて申し訳ありません
ちょっと期間空きますが必ず目を通します、ご協力頂いた方ありがとうございました
ssmx
メンバー
メンバー
記事: 12
登録日時: 2017年6月16日(金) 23:21

vue.js との共存について

投稿記事 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は今回始めて触っています。
アバター
hisato
メンバー
メンバー
記事: 71
登録日時: 2012年8月18日(土) 20:21

vue.js との共存について

投稿記事 by hisato »

<@LITERAL> は提案で、まだ組み込まれてないのではないでしょうか?
個人的にも<@LITERAL>こういう機能あると嬉しいです。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

vue.js との共存について

投稿記事 by yama »

了解です、後ほど実装します
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

vue.js との共存について

投稿記事 by yama »

https://github.com/modxcms-jp/evolution ... evelop.zip
実装しました。試していただいてよいでしょうか?
アバター
hisato
メンバー
メンバー
記事: 71
登録日時: 2012年8月18日(土) 20:21

vue.js との共存について

投稿記事 by hisato »

ありがとうございます。
テスト用サイトですがモディファイアやネストなどいくつか使用パターンを試してみて特に問題ないようでした。
返信する