Question

这是我在mixins.jade中的mixin

    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      var img = new Image();
      img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.beginPath();
        ctx.moveTo(30,96);
        ctx.lineTo(70,66);
        ctx.lineTo(103,76);
        ctx.lineTo(170,15);
        ctx.stroke();
      };
      img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
    }

我在data.json中的数据

mixin link(url, name)
  a(href='#{data.url}', title=name)&attributes(attributes)= name

这是模板中调用的mixin

{
    "facebook": "fb.com",
    "twitter": "tt.com",
}

在gulpfile.js中使用gulp进行处理

+link('facebook', 'Go to facebook')(class="social-link")

最终结果给出未定义的值

gulp.task('templates', function() {

  gulp.src(srcDir + '/html/template.jade')
    .pipe(jade({
      locals: {
        data: data,
        pretty: true
      }
    }))
    .pipe(rename('intermediate.html'))
    .pipe(gulp.dest(srcDir + '/html'))
});

找不到能够在mixin中调用我的数据的方法。我知道数据正在运行，因为如果我在mixin（例如）中使用data.facebook而不是data.url，那么我将使用正确的url渲染。

也不起作用： mixin链接（网址，名称） a（href ='＃{data。'+ url +'}'，title = name）＆amp; attributes（attributes）= name

它渲染

<a href="undefined" title="Go to facebook" class="social-link">Go to facebook</a>

而不是<a href="#{data.webversion}">

Answer 1

如果您使用

怎么办？

mixin link(url, name)
  a(href=url, title=name)&attributes(attributes)= name

编辑：或者

mixin link(url, name)
  a(href='#{data[url]}', title=name)&attributes(attributes)= name

将数据参数分配给Jade mixin

1 个答案: