中文文档

[lifesinger]

文本插件

在 JavaScript 中嵌入 HTML 模板很不方便，特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。

首先，需要引入文本插件：

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-text.js"></script>

也可以通过 preload 配置来引入。

加载模板字符串

引入文本插件后，就可以在模块中直接通过 require 来加载文本文件了：

define(function(require) {

  // 获取文本内容
  var tpl = require('./a.tpl');
  console.log(tpl);

});

a.tpl

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

除了 .tpl 后缀, 还可以使用 .html 后缀，或 text! 前缀来指明文本文件。

加载 Handlebars 模板并进行预编译

对于 Handlebars 模板，在开发时我们可以让编译透明化。首先要配置 handlebars 的路径：

seajs.config({
  alias: {
    handlebars: 'gallery/handlebars/1.0.2/handlebars'
  }
})

然后在模块代码中，就可以直接获取编译后的 handlebars 模块函数了：

  var compiled = require('./a.handlebars')
  var html = compiled({foo: 'bar'})

加载 JSON 数据

除了加载模板等文本文件，使用文本插件还可以加载 JSON 数据：

a.json

{
  "name": "Frank",
  "age": 30
}

define(function(require) {

  // 加载 json 数据
  var data = require('./a.json');
  console.log(data.name);

});

除了 .json 后缀，还可以使用 json! 前缀来指明 JSON 文件。

注意事项

1. Sea.js 通过 XHR 来加载文本文件。受同源策略限制，在开发完成后，推荐通过构建工具将文本文件转换为 JS 代码。这样，上线后就可以从任意域加载。
2. Sea.js 原生支持 css 文件的加载，直接 require('path/to/file.css') 即可。

[xiaomaolv]

seajs和seajs-text.js是有版本的依赖

[jsckdao]

我想知道的是, 在我使用seajs-text引入一些模版文件后, 项目出来后再用 spm 进行构建的时候, 怎么正确将怎么正确将这些模版也编译成js文件合并进去? 我在构建的时候仍然无法合并这些模版

 warn: file .build\tmpl\player-info.html.js not found
 warn: file .build\tmpl\player-info-debug.html.js not found

[vincent-li]

我为何使用seajs load html没有反应，seajs 版本2.1.1，seajs-text 1.0.1，依赖文件都已经按照顺序加载进来了。

[lyingd]

xhr调用完毕后，应释放callback，我用IE兼容模式，貌似callback泄漏

[army8735]

哪里没释放？

[lyingd]

r.onreadystatechange = function() {
if (r.readyState === 4) {
// Support local file
if (r.status > 399 && r.status < 600) {
throw new Error("Could not load: " + url + ", status = " + r.status)
}
else {
callback(r.responseText)
}
}
}

就这里，每发一个json请求，callback就产生一份，和外部xhr函数构成闭包，貌似不释放哦

[xiaomaolv]

有可能是还有文件没有引入 特别注意的是引入的顺序也很有关系的 希望能解决你的问题

------------------ 原始邮件 ------------------
发件人: "my7years";[email protected];
发送时间: 2014年8月6日(星期三) 下午2:31
收件人: "seajs/seajs-text"[email protected];
抄送: "小飞"[email protected];
主题: Re: [seajs-text] 中文文档 (#1)

<title>Document</title> <script src="./js/core/sea.js"></script> <script src="./js/core/seajs-text.js"></script>

仅仅引用了2给js文件：sea和sea-text就直接报了下面的错误，请问是什么原因呢？
Uncaught TypeError: undefined is not a function seajs-text.js:62

—
Reply to this email directly or view it on GitHub.

[momofiona]

ÇëÏȼÓseajs.config

YOZOSOFT CO.,LTD
Volans Building D Dist. Wuxi (National) Software Park, No.18 Zhengze Road,
Wuxi New District, Jiangsu, China 214135
Mobile£º13921350591
Email£º[email protected]
http://www.yozooffice.com

[xiaomaolv]

ÇëÏȼÓseajs.config ‍ 这是什么情况 ？？

------------------ 原始邮件 ------------------
发件人: "Cui Rong";[email protected];
发送时间: 2014年8月7日(星期四) 下午4:17
收件人: "seajs/seajs-text"[email protected];
抄送: "小飞"[email protected];
主题: Re: [seajs-text] 中文文档 (#1)

ÇëÏȼÓseajs.config

---

YOZOSOFT CO.,LTD
Volans Building D Dist. Wuxi (National) Software Park, No.18 Zhengze Road,
Wuxi New District, Jiangsu, China 214135
Mobile£º13921350591
Email£º[email protected]
http://www.yozooffice.com
—
Reply to this email directly or view it on GitHub.

[momofiona]

seajs.js
seajs.config.js
seajs.text.js
....

---

YOZOSOFT CO.,LTD
Volans Building D Dist. Wuxi (National) Software Park, No.18 Zhengze Road,
Wuxi New District, Jiangsu, China 214135
Mobile£º13921350591
Email£º[email protected]
http://www.yozooffice.com

[jiananshi]

看描述像是pjax＋jsonp的功能

[xwartz]

= = 能把文档写好点不。。看着真是累

[lepture]

@xwartz 所以您觉得哪些地方是需要改进的？

[xwartz]

@lepture 我还是觉得类似 requirejs 这样比较好啊，看起不用页面跳来跳去的

[lewyue]

require是预先将一切加载为文本的，按需加载多好

[yreenchan]

@lewyue , xwartz的意思是把文档整合到一个页面上，可以是异步刷新页面，这样不用切换不同的github页面

[flyyang]

handlebars在执行的时候报错。文件是通过spm install的。

求教如何修改。

[lingjiao10]

请问2.0.0版本是否可以用这个插件？

[stevenlii]

sea.js 在哪？

[guotingchao]

seajs-text不能直接用seajs.require去引入嘛？

[ms143014]

能不能不使用文件作为模板
使用文件的话需要创建很多文件模板
有时候仅仅是为了拼接一些简单的字符串就创建模板, 太不友好了

[boboxiao]

seajs-text 不能跨域请求模板文件么？

[lvxing1]

@flyyang 遇见一样的问题

[ms143014]

我在网上找到了一个模板方法,用了一段时间感觉不错

function tmpl(tmpl, data) {
    return tmpl.replace(/\{([\w\.]*)\}/g, function(str, key) {
        var keys = key.split("."), v = data[keys.shift()];
        for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]];
        return (typeof v !== "undefined" && v !== null) ? v : "";
    });
}

执行

tmpl("<p>Hello {first_name} {last_name}! Your account is <strong>{account.status}</strong></p>", {first_name:'Thomas', last_name: 'Mazur', account:{status: 'active'}})


结果=> <p>Hello Thomas Mazur! Your account is <strong>active</strong></p>