В многостраничном проекте веб-приложения серверная часть работает на Node.js и Express. Marko используется как шаблонизатор для рендеринга на стороне сервера. Пример:
<h1>${ out.global.__('user.title') } </h1>
<form action="" method="POST">
<input type="text" name="firstname" value=(out.global.req.body.firstname || '')>
<if(out.global.err.firstname)>
<span class="error">$!{ out.global.err.firstname}</span>
</if>
</form>
Мне нужно добавить клиентскую часть интерактивности JavaScript (на данный момент нет JS). Необходимо добавить JS на стороне клиента, сохранив многостраничную форму, что означает отсутствие одностраничного приложения.
Цель состоит в том, чтобы скомпилировать и сгенерировать представления на стороне сервера с помощью Marko, а затем отправить его вбраузер, в котором Vue будет «увлажнять» HTML, чтобы добавить интерактивность. Я не знаю, как написать эту серверную часть.
(я знаю, что мы можем использовать Vue.js или Marko в качестве изоморфного / универсального веб-приложения («один и тот же» код / библиотека для обоих серверов). рендеринг на стороне клиента и рендеринг на стороне клиента), но это не вопрос)
Я уже добавил html-elements.json, чтобы разрешить теги компонентов Vue с помощью Marko. Но даже при этом я не понимаю, как синтаксис двух шаблонизаторов может работать вместе, а не "сталкиваться". Если я это сделаю:
<h1>${ out.global.__('user.title') } </h1>
<form action="" method="POST">
<input v-model="firstname" :type="type" name="firstname" value=(out.global.req.body.firstname || '')>
<if(out.global.err.firstname)>
<span class="error">$!{ out.global.err.firstname}</span>
</if>
</form>
v-model будет работать, но ярлык :type приведет к сбою компилятора Marko. Это один из примеров, но их, вероятно, много. Похоже, написание синтаксиса Vue.js в файлах Marko не является решением.
Я хотел бы знать, возможно ли добавить Vue.js в клиентскую часть проекта, сохранив marko на стороне сервера иЕсли да, с чего начать / как это сделать?
Надеюсь, это понятно, заранее благодарю за помощь.