目录
- vue+freemarker遇到的坑
- 在这个过程中遇到了几个坑
- freemarker的一些坑问题
- 1.对空对象十分敏感
- 2.freemarker中的${}与js中的${}冲突
- 3.渲染数字时出现逗号分隔
- 4.拼接渲染
- 5.将对象或数组渲染进js
vue+freemarker遇到的坑
java后端开发者做后台管理系统，用模版技术还是挺方便的，但是如果在页面上对数据进行修改，怎么办呢？
可以用jQuery选中各个dom节点的值，然后组装成后台接口中需要的Form，再用ajax请求后台，这种方式的缺点在于，如果数据字段比较多，需要手动选择很多个dom节点，再取值，想想都可怕。
由于笔者之前做过AngularJS的项目，知道了数据的双向绑定，现在很火的Vue.js也是跟AngularJS差不多，支持双向绑定。但是不想用前后端分离，搞两套部署，主要是对前端部署那些也不熟悉。
那笔者就想在模版页面中引入Vue.js的双向绑定功能，这样就不用再用jQuery去选择dom节点了。
大概思路浏览器请求Controller，返回一个视图，这个视图就是freemarker模版，在模版中引入Vue.js，将页面上需要提交的数据绑定到Vue的对象中的数据上，然后在创建或更新的时候直接用ajax请求把这个Vue对象中的数据传给后端。
在这个过程中遇到了几个坑
1.通过jquery修改vue绑定的model值(v-model)，vue取不到这个值。
如freemarker模版中有<img :src=“pic_url”/>，在用户上传图片后，通过jquery更改img的src属性为图片地址之后，通过vue的对象中的data中的pic_url是取不到这个值的。
查了网上说，vue一般都只监听用户在页面上的操作事件，jquery修改的事件不能够被vue监听到，可以在jquery修改后dispatch一个event给vue监听，笔者为了省事，在vue对象中methods中的方法中，把需要用jquery改变的地方，还是用jquery取到之后再赋值给vue对象中的数据属性上。
2.freemarker模版片段中引用了<script></script>，在script中有new Vue的操作，结果到浏览器页面报错：
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.
后来上网查了一下，在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把数据清空了，虽然在开发者工具中仍可以看到input的value属性是有值的，但是页面是不显示的，vue的对象中data中也没有值。
正确的做法应该是在freemarker中，把值赋给vue的对象，而不是赋值给dom上的input节点的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??}结合freemarker的条件标签。
<#if item??> true:item值不为空 <#else> false:item值为null </#if>
值得注意的是在freemarker自身的标签中，是不需要${}的
2.freemarker中的${}与js中的${}冲突
在外面包裹上${r"..."}
${r"${person.name}"} 输出js语句 ${person.name}，如果没有包裹的话，js会被渲染。
3.渲染数字时出现逗号分隔
渲染数字时freemarker 会自动每隔3位进行逗号分隔，使用${id?c}就不会了。
4.拼接渲染
${}内是可以做计算的，也可以字符串拼接。如：${a+1}，${str1+str2}。需要注意的是，如果内部复合了其他方法，需要加上小括号。如${str1+(str2!'')}
5.将对象或数组渲染进js
因为${}渲染的都是静态的字符串，如果想要js获取到对象或数组，需要配合js自身的数组push方法结合渲染对象最小的单位形成一个插入方法（最小的单位不能是对象或数组，最小单位是字符串或数字等），
例如一个
dbLinkData数组里面是多个
{
groupName: 'XXX',
linkInfo: arr2
} 对象
而 arr2 又是一个数组内部是多个
{
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 >
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。