Braces-template
Braces-template is a Javascript templating engine. It inherits its look from the Vue.js library. Braces-template does not provide reactive data binding, so it can not sync your changed data to the dom after rendering.
Big Thanks
Vue.js
A progressive framework for building user interfaces.
Sauce Labs
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs
Installation
npm install braces-template --save
Example
new with template
var el = documentelid = 'app'documentbody var vm = el: '#app' template: '<div>{{ message }}</div>' data: message: 'Hello World' // output:// <div id="app"><div>Hello World</div></div>elparentNode
v-for nested
var el = documentelid = 'app'documentbody el: el template: '<div type="text/x-template" v-for="item in items">' + '<p v-for="subItem in item.items">{{$index}} {{subItem.a}} {{$parent.$index}} {{item.a}}</p>' + '</div>' data: items: items: a: 1 a: 2 a: 1 items: a: 3 a: 4 a: 2 elparentNode
v-if false
var el = documentelid = 'app'documentbody el: '#app' template: '<div v-if="test"><div :a="a"></div></div>' data: test: false a: 'A' elparentNode
v-if true
var el = documentelid = 'app'documentbody el: el template: '<div v-if="test"><div id="a" :a="a"></div></div>' data: test: true a: 'A' // lazy instantitationif _isIE8 else elparentNode
html
var el = documentelid = 'app'documentbody el: '#app' template: '<div>{{{ message }}}</div>' data: message: '<div>1234</div><p>234</p>' elparentNode
v-method
var el = documentelid = 'app'documentbody var html = ''html += '<div type="text/x-template" v-method:name,u-id.literal="test">'html += 'return name + uId'html += '</div>'html += '<div>{{test("hcl", "1687")}}</div>'elinnerHTML = html el: el elparentNode
v-source
var el = documentelid = 'app'documentbody var html = ''html += '<div type="text/x-template" v-source="test"><div>{{a}}</div></div>'elinnerHTML = html el: el methods: { return { } } elparentNode
Documentation
Supported Environments
Braces-template has been designed to work in IE8 and other browsers that are ES5-compliant.
Braces-template need es5-shim and es5-sham in IE8. If you want to run Braces-template in IE8, include es5-shim and es5-sham into your page first.
IE8 Caveats
- v-bind
- no support bind xlink attribute.
- v-on
- no support attache an event listener to the iframe element except load event.
- no support capture mode.
- svg
- no support svg.
- template tag
- no support template tag, using
<div type="text/x-template"></div>
instead.
- no support template tag, using
- custom tag
- no support custom tag
- a.true should be replaced by a['true']
- true is a keyword in javascript. using dot notaion 'true' will throw an error in IE8.
License
Copyright (c) 2018-present Chunlin He