• avalon视频学习笔记(二)


    一、数据填充
    含义:将数据打印到页面上,通过绑定属性,将页面变成动态模版
        1、插值表达式 {{prop}},{{prop | html}}定界符及自动配置
            含义:{{prop}}是对某一文本节点的nodeValue进行修改,因此不会影响兄弟节点,{{prop}}只是表示这个地方可以被替换,在avalon中,它只在文本节点中有效,它不能替换属性节点里的名字,特性节点的名字必须以ms-开头。
            a、{{prop}}
    1. <head>
    2. <meta charset="UTF-8">
    3. <title>avalon-prop</title>
    4. <script type="text/javascript" src="../avalon.min.js"></script>
    5. <script>
    6. avalon.ready(function () {
    7. avalon.define({
    8. $id:"test",
    9. word:"Hello avalon"
    10. })
    11. avalon.scan();
    12. })
    13. </script>
    14. </head>
    15. <body>
    16. <div ms-controller="test">
    17. {{word}}
    18. </div>
    19. </body>
                *在avalon还没没有加载完成,但是html文件已经绚烂完毕,导致{{word}}暴漏,应该怎么处理?
    1. <style>
    2. .ms-controller{
    3. visibility:hidden;
    4. }
    5. </style>
                   引用样式,可以正常显示。
                    *插值表达式,是不可设置元素属性的。
               b、{{porp | html}}对加载的值进行过滤。
               c、修改插值表达式界定符
                    当{{}}双尖括号被占用时,就可以通过修改config方法,进行修改。建议界定符的长度          大于1,不要设置为<<>>这样的位操作符。比如在DOMReady之前,调用如下语句:
    1. avalon.config({
    2. interpolate:["[","]"]
    3. })
    1. <head>
    2. <meta charset="UTF-8">
    3. <title>avalon-prop</title>
    4. <script type="text/javascript" src="../avalon.min.js"></script>
    5. <script>
    6. avalon.config({
    7. interpolate:["[[","]]"]
    8. })
    9. avalon.ready(function () {
    10. avalon.define({
    11. $id:"test",
    12. word:"Hello avalon"
    13. })
    14. avalon.scan();
    15. })
    16. </script>
    17. </head>
    18. <body>
    19. <div ms-controller="test">
    20. [[word]]
    21. </div>
    22. </body>
        2、绑定属性 ms-text,ms-html,ms-value
            a、ms-test
                含义:ms-text是文本绑定属性,会清空元元素的内部再进行内部填充。ms-text其实就是{{prop}}的真身,框架内部都是走同一处理函数,ms-text作为一个绑定属性,必须附于元素节点之上,因此没有前者那么方便
    1. <head>
    2. <meta charset="UTF-8">
    3. <title>avalon-prop</title>
    4. <script type="text/javascript" src="../avalon.min.js"></script>
    5. <script>
    6. avalon.ready(function () {
    7. avalon.define({
    8. $id:"test",
    9. word:"Hello avalon"
    10. })
    11. avalon.scan();
    12. })
    13. </script>
    14. </head>
    15. <body>
    16. <div ms-controller="test" ms-text="word"></div>
    17. </body>
            b、ms-html
                含义:ms-html是html绑定属性,会清空原元素的内部,再进行内部填充。ms-html其实就是{{  porp | html }}的真身,框架内部都是走同一处理函数,ms-html作为一个绑定属性,必须附于元素节点之上,因此没有前者那么方便。
    1. <head>
    2. <meta charset="UTF-8">
    3. <title>avalon-prop</title>
    4. <script type="text/javascript" src="../avalon.min.js"></script>
    5. <script>
    6. avalon.ready(function () {
    7. avalon.define({
    8. $id:"test",
    9. word:"<p>Hello avalon<p>"
    10. })
    11. avalon.define({
    12. $id:"test2",
    13. word:"<p>Hello avalon</p>"
    14. })
    15. avalon.scan();
    16. })
    17. </script>
    18. </head>
    19. <body>
    20. <div ms-controller="test" ms-text="word"></div>
    21. <div ms-controller="test2" ms-html="word"></div>
    22. </body>
    23. </html>
                    两者的区别就是:
                    text会将存储的字符串,当成text文本原样输出。
                    html会将存储的字符串,当成html文本元素输出。
            c、绑定属性ms-value
                含义:用过ms-value指令,数据能通过表单元素的value值显示出来。ms-value为了应对复杂的显示,也支持插值表达式,但里面不能用过滤器。
    1. <head>
    2. <meta charset="UTF-8">
    3. <title>avalon-prop2</title>
    4. <script type="text/javascript" src="../avalon.min.js"></script>
    5. <script type="text/javascript">
    6. avalon.ready(function () {
    7. avalon.define({
    8. $id:"text",
    9. text:'111'
    10. })
    11. avalon.scan();
    12. })
    13. </script>
    14. </head>
    15. <body>
    16. <div ms-controller="text">
    17. <input type="text" ms-value="text">
    18. <textarea name="" id="" cols="30" rows="10" ms-value="xxx{{text+'!!!'}}yyy"></textarea>
    19. </div>
    20. </body>

        3、过滤器 html、uppercase、lowercase、truncate、camelize、escape、currency、number、date多过滤器协同工作,自定义过滤器





  • 相关阅读:
    HDU1720 A+B Coming
    HDU1390 ZOJ1383 Binary Numbers
    HDU1390 ZOJ1383 Binary Numbers
    HDU2504 又见GCD
    HDU2504 又见GCD
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1020 ZOJ2478 Encoding
    HDU1020 ZOJ2478 Encoding
    HDU2097 Sky数
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4455734.html
Copyright © 2020-2023  润新知