大概思路瀏覽器請求Controller，返回一個視圖，這個視圖就是freemarker模版，在模版中引入Vue.js，將頁面上需要提交的數(shù)據(jù)綁定到Vue的對象中的數(shù)據(jù)上，然后在創(chuàng)建或更新的時候直接用ajax請求把這個Vue對象中的數(shù)據(jù)傳給后端。

在這個過程中遇到了幾個坑

1.通過jquery修改vue綁定的model值(v-model)，vue取不到這個值。

如freemarker模版中有<img :src=“pic_url”/>，在用戶上傳圖片后，通過jquery更改img的src屬性為圖片地址之后，通過vue的對象中的data中的pic_url是取不到這個值的。

查了網(wǎng)上說，vue一般都只監(jiān)聽用戶在頁面上的操作事件，jquery修改的事件不能夠被vue監(jiān)聽到，可以在jquery修改后dispatch一個event給vue監(jiān)聽，筆者為了省事，在vue對象中methods中的方法中，把需要用jquery改變的地方，還是用jquery取到之后再賦值給vue對象中的數(shù)據(jù)屬性上。

2.freemarker模版片段中引用了<script></script>，在script中有new Vue的操作，結(jié)果到瀏覽器頁面報錯：

templates should only be responsible for mapping the state to the ui. avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

后來上網(wǎng)查了一下，在script中加上了type就好了：

<script type=“application/javascript”>

可以參考https://stackoverflow.com/questions/38119088/error-templates-should-only-be-responsible-for-mapping-the-state-to-the-ui-avo

3.freemarker模版中的input value明明是有值的，到瀏覽器中頁面上卻不顯示。

原因是因為這個input被vue的model綁定了，到瀏覽器中vue把數(shù)據(jù)清空了，雖然在開發(fā)者工具中仍可以看到input的value屬性是有值的，但是頁面是不顯示的，vue的對象中data中也沒有值。

正確的做法應(yīng)該是在freemarker中，把值賦給vue的對象，而不是賦值給dom上的input節(jié)點的value：

? ? var modifyVm = new Vue({
? ? ? ? el: '#myModifyModalContent',
? ? ? ? data: {
? ? ? ? ? ? myForm: {
? ? ? ? ? ? //這兒把freemarker模版中的初始值賦值給vue對象的data中屬性
? ? ? ? ? ? //然后freemarker中寫成
?? ??? ??? ?//<input type="text" v-model="myForm.name" placeholder="請輸入城市名稱"/>
?? ??? ??? ?//這樣就可以了。
? ? ? ? ? ? ? ? name: "${oldCityInfo.name!''}",
? ? ? ? ? ? ? ? //標簽
? ? ? ? ? ? ? ? labels: '',
? ? ? ? ? ? }
? ? ? ? },
?? ??? ?...
?? ?)

freemarker的一些坑問題

1.對空對象十分敏感

freemarker對空值敏感，當我們的值為空時，會拋出異常。

解決辦法是：

1.${item!''} 當item為null時渲染為空字符串，不為空則渲染自身值。

2.${item??}結(jié)合freemarker的條件標簽。

<#if item??>
? ? true:item值不為空
<#else>
? ? false:item值為null
</#if>

值得注意的是在freemarker自身的標簽中，是不需要${}的

2.freemarker中的${}與js中的${}沖突

在外面包裹上${r"..."}

${r"${person.name}"} 輸出js語句 ${person.name}，如果沒有包裹的話，js會被渲染。

3.渲染數(shù)字時出現(xiàn)逗號分隔

渲染數(shù)字時freemarker 會自動每隔3位進行逗號分隔，使用${id?c}就不會了。

4.拼接渲染

${}內(nèi)是可以做計算的，也可以字符串拼接。如：${a+1}，${str1+str2}。需要注意的是，如果內(nèi)部復(fù)合了其他方法，需要加上小括號。如${str1+(str2!'')}

5.將對象或數(shù)組渲染進js

因為${}渲染的都是靜態(tài)的字符串，如果想要js獲取到對象或數(shù)組，需要配合js自身的數(shù)組push方法結(jié)合渲染對象最小的單位形成一個插入方法（最小的單位不能是對象或數(shù)組，最小單位是字符串或數(shù)字等），

例如一個

?? ??? ?dbLinkData數(shù)組里面是多個
? ? ? ? ?{
? ? ? ? ? ? groupName: 'XXX',
? ? ? ? ? ? linkInfo: arr2
? ? ? ? ?} 對象
? ? ? ? ?而 arr2 又是一個數(shù)組內(nèi)部是多個
? ? ? ? ?{
? ? ? ? ? ? name:'XXX',
? ? ? ? ? ? url:'XXX'
? ? ? ? ? } 對象

解決方法如下：

? ? ?var listMember = "${dbLinkData?size}";
? ? ? ? var arr1 = [];
? ? ? ? if (listMember != 0) {
? ? ? ? ? <#list dbLinkData as item >
? ? ? ? ? ? var arr2=[];
? ? ? ? ? ? <#list item.linkInfo as items >
? ? ? ? ? ? arr2.push({
? ? ? ? ? ? ? name:'${items.name}',
? ? ? ? ? ? url:'${items.url}'
? ? ? ? ? })
? ? ? ? ? </#list>
? ? ? ? ? arr1.push({
? ? ? ? ? ? groupName: '${item.groupName}',
? ? ? ? ? ? linkInfo: arr2
? ? ? ? ? })
? ? ? ? </#list >
? ? ? ? }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: