pat例子（1）simple

展示基本语法

by cherishpeace

HTML

<script src="https://g.alicdn.com/mm/pat/1.0/pat.js"></script>
<div id="test">

</div>

<!--支持传入模板-->
<script type="javascript/template" id="J_tmpl">

  <div class="line">基本渲染:{{text}}</div>

  <div class="line">
    列表渲染： {{#for(item in lists)}}
    <div id="{{item.name}}">
      {{item.text}}-{{text}}-当前索引{{__INDEX__}}
    </div>
    {{/for}}
  </div>

  <div class="line">
    逻辑判断： {{#if(key == 11)}}
    <div id="{{key}}" t-class:test="test == 2">{{text}}</div>
    {{/if}} {{#if(key == 10)}}
    <div id="{{key}}">{{text|fff}}</div>
    {{/if}}
  </div>

</script>

CSS

body {
  background: #fafafa;
}

#test {
  background: #fff;
  margin: 20px auto;
  border: 1px solid #eee;
  border-radius: 5px;
  width: 300px;
  min-height: 100px;
  padding: 20px 30px;
}

.line {
  text-align: left;
  padding: 5px;
  margin-bottom: 10px;
}

JavaScript

Pat.config({
  debug: true
})

var p2 = new Pat({
  el: 'test',
  //dataCheckType:'dirtyCheck',
  data: {
    text: 'hello',
    key: 10,
    name: '111',
    lists: [{
      name: '1',
      text: '11111',
      hell: null
    }, {
      name: '2',
      text: '22222',
      hell: null
    }]
  },
  filters: {
    fff: function(value) {
      return value + '-我是filter带的值'
    }
  },
  template: document.getElementById('J_tmpl').innerHTML
})