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

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

var vm = new Braces({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello World'
  }
})

// output:
// <div id="app"><div>Hello World</div></div>
expect(textContent(vm.$el).replace(/\r\n/g, '')).toBe('Hello World')
el.parentNode.removeChild(el)

v-for nested

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

new Braces({
  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 }
    ]
  }
})

expect(el.innerHTML.replace(/\r\n/g, '').toLowerCase()).toBe(
  '<p>0 1 0 1</p><p>1 2 0 1</p>' +
  '<p>0 3 1 2</p><p>1 4 1 2</p>'
)
el.parentNode.removeChild(el)

v-if false

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

new Braces({
  el: '#app',
  template: '<div v-if="test"><div :a="a"></div></div>',
  data: { test: false, a: 'A' }
})
expect(el.innerHTML).toBe('')
el.parentNode.removeChild(el)

v-if true

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

new Braces({
  el: el,
  template: '<div v-if="test"><div id="a" :a="a"></div></div>',
  data: { test: true, a: 'A' }
})
// lazy instantitation
if (_.isIE8) {
  expect(el.innerHTML.replace(/\r\n/g, '')).toBe('<DIV><DIV id=a a="A"></DIV></DIV>')
} else {
  expect(el.innerHTML).toBe('<div><div id="a" a="A"></div></div>')
}
expect(el.children[0].children[0].getAttribute('a')).toBe('A')
el.parentNode.removeChild(el)

html

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

new Braces({
  el: '#app',
  template: '<div>{{{ message }}}</div>',
  data: {
    message: '<div>1234</div><p>234</p>'
  }
})
expect(el.innerHTML.replace(/\r\n/g, '').toLowerCase()).toBe('<div><div>1234</div><p>234</p></div>')
el.parentNode.removeChild(el)

v-method

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

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>'
el.innerHTML = html
new Braces({
  el: el
})
expect(el.innerHTML.replace(/\r\n/g, '').toLowerCase()).toBe('<div>hcl1687</div>')

el.parentNode.removeChild(el)

v-source

import Braces from 'braces-template'

var el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

var html = ''
html += '<div type="text/x-template" v-source="test"><div>{{a}}</div></div>'
el.innerHTML = html
new Braces({
  el: el,
  methods: {
    test: function () {
      return new Promise(function (resolve) {
        setTimeout(function () {
          resolve({ a: 1 })
        }, 500)
      })
    }
  }
})

setTimeout(function () {
  expect(el.innerHTML.replace(/\r\n/g, '').toLowerCase()).toBe('<div>1</div>')
  // done()
}, 1000)

el.parentNode.removeChild(el)

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.
• 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

MIT

Copyright (c) 2018-present Chunlin He