• 使用p-context设置上下文

    在pandyle中，可以使用p-context为元素设置数据上下文。该元素及其子元素的数据绑定将按照上下文进行解析。

    1.   <div p-context="info">
    2.       <p>{{name}}</p>
    3.       <p>{{age}}</p>
    4.   </div>
    6.   <script>
    7.       $('div').vm({
    8.           message: 'hello world',
    9.           info: {
    10.               name: '张三',
    11.               age: 29
    12.           }
    13.       })
    14.   </script>

    在p-context中，可以使用转换器对数据上下文进行转换。转换器使用管道语法data | converter书写，converter是一个转换器函数，该函数接收一个输入参数，并返回一个对象。在使用管道之前，需要先将converter注册到vm的转换器集合中。

    1.   <div p-context="info | test">
    2.       <p>{{name}}</p>
    3.       <p>{{age}}</p>
    4.   </div>
    6.   <script>
    7.       var vm = $('div').vm({
    8.           message: 'hello world',
    9.           info: {
    10.               name: '张三',
    11.               age: 29
    12.           }
    13.       }, false);  //在vm函数中将autoRun设置为false，以阻止渲染。
    14.       vm.register('testConverter', function(data){  //注册转换器testConverter（转换器的命名必须以Converter结尾）
    15.           data.name = '李四';
    16.           data.age++;
    17.           return data;
    18.       })
    19.       vm.run();  //调用vm.run()进行渲染
    20.   </script>

    还可以使用直接对象转换的方式对上下文进行转换。格式为data | {…}。

    1.   <div class="main">
    2.       <div p-context="info | {myName: name, myAge: age, msg: 'hello'}">
    3.           <p>{{myName}}</p>
    4.           <p>{{myAge}}</p>
    5.           <p>{{msg}}</p>
    6.       </div>
    7.       <div p-context="|{myName: '李四', myAge: 30}">
    8.           <p>{{myName}}</p>
    9.           <p>{{myAge}}</p>
    10.       </div>
    11.   </div>
    13.   <script>
    14.       $('.main').vm({
    15.           info: {
    16.               name: '张三',
    17.               age: 29
    18.           }
    19.       });
    20.   </script>