问答

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

作者:admin 2021-09-09 我要评论

老师们好! 现在构建工具用的 gulp,使用 gulp-swig 插件可以解析页面中的模板语法,就像下面这样: const page = () = { return src('src/*.html') .pipe(plugi...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

老师们好!

现在构建工具用的 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 模板文件的插件。

###

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()));

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 如何把 AJAX 获取的数据传递到 Swig 模

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

  • egg.js    npm run start启动时怎么监

    egg.js npm run start启动时怎么监

  • formData数据(含文件流)json化

    formData数据(含文件流)json化

  • debian fileformat=unix 仍然No such f

    debian fileformat=unix 仍然No such f

腾讯云代理商
海外云服务器