zoukankan      html  css  js  c++  java
  • 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多过滤器协同工作,自定义过滤器





  • 相关阅读:
    FILTER(过滤器)
    HDFS优缺点
    python运算符
    python变量类型
    python变量存储
    python编码问题
    【一:定义】python 简介
    如何学一门新技术
    Django安装
    redis 安装及启动关闭
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4455734.html
Copyright © 2011-2022 走看看