avalon 显示html,常见问题

常见问题

如何兼容到IE6

avalon只是提供数据绑定功能，没有JS动画，AJAX等模块。这需要其他库来提供，此外，IE的低版本不支持

JSON，XMLHttpRequest对象，高版本不支持Promise。这需要我们额外引入其他库来支持

最后是Promise库

当然，前4个常用的库可以打包，或者全部打包

开发时，最好一边开发一边在IE8下测试(因为IE8下有开发者工具，能模拟IE6的情况)，不要全部开发完再测试IE6

如何隐藏首屏加载页面时出现的花括号

答:在页面上添加一个样式

.ms-controller{

visibility: hidden

}

使用在ms-controller, ms-important的元素上加上这个ms-controller类名

{{@aaa}}

IE6-8下为vm的数组重新赋给一个新数组失败?

vm.arr2 = vm.arr1 //报错

记住,任何时候,不能将vm中的数组或子对象取出来,再用它们赋给vm的某个数组或子对象,

因为放在vm中的数组与子对象已经变成VM了,而VM重写VM不被允许的.

并且你要保证原数据不被污染,需要使用深拷贝.

vm.arr2 = avalon.mix(true, [], arr1)

vm.obj2 = avalon.mix(true, {}, obj1)

你也可以这样,将原数据转换为纯数据就行了

vm.arr2 = vm.arr1.$model //正常

为什么我的指令没有效果?

例子!

答:因为avalon只会对ms-*属性敏感, 另外, 花括号里的ddd要加上@,即

例子!

如何在页面扫描后执行一个回调

答: avalon2支持onReady方法

var vm = avalon.define({

$id: 'test',

ddd: false

})

vm.$watch('onReady', function(){

//当test这个区域第一次扫描后会被执行

})

对表单元素的值输入进行限制

答: avalon提供了4个转换器,那是将value值上传到vm时用,也提供了许多格式式过滤器,

但在ms-duplex格式化很容易死循环,因此建议在另加input事件做处理.

比如说我们限制只能输入数字

$id: 'test',

aaa: 111,

fix: function(e){

e.target.value = e.target.value.replace(/\D+/, '')

}

})

{{@aaa}}

如果手动执行验证

答: ms-validate提供了各种全自动的验证.但可能大家需要手动执行验证表单

在ms-validate的配置对象上添加一个onManual,页面被扫描后,你就可能拿这个方法来自己执行验证

Drag-Drop

ms-rules='{required:true,chs:true}' >{{@aaa}}

ms-rules='{required:true}'

ms-duplex="@bbb" />

ms-rules="{required:true,equalto:'pw'}" placeholder="再填一次"

ms-duplex="@ccc | change" />

$id: "validate1",

aaa: "",

bbb: '',

ccc: '',

validate: {

onManual:avalon.noop,//IE6-8必须指定,avalon一会儿会重写这方法

onError: function (reasons){

reasons.forEach(function (reason){

console.log(reason.getMessage())

})

},

onValidateAll: function (reasons){//它会被onManual调用

if (reasons.length) {

console.log('有表单没有通过')

} else {

console.log('全部通过')

}

}

}

})

setTimeout(function(){

vm.validate.onManual()

})

页面用了avalon后, 元素间没有距离了

答: 因为avalon在页面加载好后,会清掉所有空白文本,减少页面的节点数,从而减少以后diff的节点个数. 详见这里.

组件的注意事项

答: 最好指定全局不重复的$id,特别在ms-for循环中,必须指定$id

$id: 'test',

tests: [0,1]

})

avalon.component('ms-button', {

template: '',

defaults: {

buttonText: "默认内容"

},

soleSlot: 'buttonText'

})

为什么我的日期不能同步

var vm = avalon.define({

$id:'aaa',

date: new Date

})

setTimeout(function(){

vm.date = new Date

}, 1000)

答: 因为avalon只会对number, string, boolean, 纯对象, 纯数组这几个类型同步, 其他类型需要转换.

将上面的new Date改成new Date - 0即可

如何将页面模块化？