如何把 AJAX 获取的数据传递到 Swig 模板中?

y_57c1af5eb01b9
  • 20

老师们好!

现在构建工具用的 gulp,使用 gulp-swig 插件可以解析页面中的模板语法,就像下面这样:

const page = () => {
    return src('src/*.html')
        .pipe(plugins.swig({
            data: { name: '' },
        }))
        .pipe(dest('dist'));
};

但问题是模板中的数据都来自于 gulpfile.js,当前端用 AJAX 获取到的数据如何让模板文件使用呢?

我知道 art-template 有对应的客户端模板的使用,需要把模板放到 script 标签中,然后通过 template(模板ID,数据) 的形式进行拼接,但好像 Gulp 没有很好的编译 art-template 模板文件的插件。

回复
阅读 696
1 个回答

gulp 支持用 Promise 定义任务,所以这样的功能其实很容易实现,我好久没折腾 gulp 了,所以写一段伪代码供参考:

// 存储数据的变量
let localData;

gulp.task('fetch', () => {
  return axios.get('/api/data')
    .then(data => {
      localData = data;
    });
});

gulp.task('render', () => {
  return src('src/*.html')
    .pipe(swig({data})
    .pipe(dest('dist'));
});

gulp.task('default', series('fetch', 'render', taskDone => taskDone()));
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏