Sea.js Manual & Documentation

Text Plugin

Text Plugin

It is nice to build HTML using regular HTML tags, but there is no good way to embed HTML in a JavaScript file. One way is using a string of HTML, but that can be hard to maintain, particularly for multi-line HTML.

With SeaJS, it is easy to load text resources.

First, using seajs.config to enable the text plugin by adding it to preload:

seajs.config({
  preload: ['plugin-text']
});

Then, just write your text files, and load them using require:

a.tpl:

<div>I am {{name}}.</div>

main.js:

define(function(require) {
  var tpl = require('./a.tpl');
  // do sth.
});

Except .tpl extension, you can also use .htm, .html, or the text! prefix to specify a text resource.

The text files are loaded via asynchronous XMLHttpRequest (XHR), so you can only fetch files from the same domain as the web page.

However, the SPM (SeaJS Package Manager) can inline any text file with the actual text contents into the modules, so after a build, the modules can be used from anywhere.

If you do want to load text resources from other domain, map feature in SeaJS will help you:

seajs.config({
  map: [
    [ /^(.*\.tpl)$/, 'http://path/to/proxy.php?q=$1' ]
  ]
});

The contents of proxy.php is very simple:

<?php
  echo file_get_contents($_GET['q']);

Please see the test cases: test.html

Table of Contents

Text Plugin