Interpolate

Micro templating engine, maps Object property values to a String template

Generate Convert Improve

Install / Use

/learn @toddmotto/Interpolate

About this skill

Quality Score

0/100

README

interpolate.js

Micro templating engine module weighing <1KB, maps Object property values to a handlebar templated String. Returns a closure which calls a unique Object as single argument against the cached template. Doesn't compile to DOM nodes, merely interpolates to String, if you want to compile to live DOM use this additional function.

Live demo

var template = [
  '<li data-location="{{ location }}">',
    '{{ name }}',
    '<span>{{ age }}</span>',
  '</li>'
].join('');

var data = {
  name: 'Todd Motto',
  age: 23,
  location: 'United Kingdom'
};

// <li data-location="United Kingdom">Todd Motto<span>23</span></li>
interpolate(template)(data);

The initial interpolate() call caches the template internally, further calls will reference this template whilst mapping Object values:

var template = [
  '<li data-location="{{ location }}">',
    '{{ name }}',
    '<span>{{ age }}</span>',
  '</li>'
].join('');

var data = [{
  name: 'Todd Motto',
  age: 23,
  location: 'United Kingdom'
},{
  name: 'Travis Barker',
  age: 38,
  location: 'United States'
}];

var render = interpolate(template);
for (var i = 0; i < data.length; i++) {
  // iterated Objects called against same template
  var done = render(data[i]);
  // 0: <li data-location="United Kingdom">Todd Motto<span>23</span></li>
  // 1: <li data-location="United States">Travis Barker<span>38</span></li>
  console.log(done);
}

Support for deep Object properties is also there:

var template = [
  '<span>',
    '{{ favourite.language }}',
  '</span>'
].join('');

var data = {
  favourite: {
    language: 'JavaScript'
  }
}

var render = interpolate(template);
console.log(render(data)); // <span>JavaScript</span>

Installing with Bower

bower install https://github.com/toddmotto/interpolate.git

Manual installation

Ensure you're using the files from the dist directory (contains compiled production-ready code). Ensure you place the script before the closing </body> tag.

<body>
  <!-- html above -->
  <script src="dist/interpolate.js"></script>
  <script>
  // interpolate module available
  </script>
</body>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.

Release history

1.1.0
- Add support for deep Object properties
1.0.0
- Initial release

Related Skills

node-connect

344.4k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

99.2k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

344.4k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

344.4k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。