Question

我有一个模糊文字的javascript函数：

function blurlines(data) {
    var dataSplit = data.split(" ");
    var lastWord = dataSplit.pop();
    var toBlur = '<span class="blur">' + dataSplit.join(" ") +  '</span>'; 
// Blur entire sentace, show only last word
     var output = '<li>' + toBlur + lastWord + '</li>';
     return output;
}

我试图通过尝试类似的方式来使用dust.js：

{#storylines}
    <script>
        blurlines("{text}");
    </script>                   
{/storylines}

是否有通过JS函数轻松传递{text}值然后呈现输出？

如果我在控制台中运行它似乎有效：

> blurlines("This is a test line")

> "<li><span class="blur">This is a test</span>line</li>"

Answer 1

我做类似的事情，在我的全局环境中创建一个辅助函数：

var dustCtx = dust.makeBase({
    blurText: function(chunk, context, bodies, params) { 
        var dataSplit = params.data.split(" ");
        var lastWord = dataSplit.pop();
        var toBlur = '<span class="blur">' + dataSplit.join(" ") +  '</span>'; 
        var output = '<li>' + toBlur + lastWord + '</li>';
        return chunk.write(output);
    }
});

将其与渲染上的本地上下文合并：

dust.render("template", dustCtx.push({storylines:...}), function(err, out) {});

然后像这样称呼它：

{#storylines}
    {#blurText data=text/}
{/storylines}

如果您想控制模糊，这种方法可能很方便传递其他参数。

Answer 2

我创建了一个dust.js过滤器以使其正常工作

  bl: function(value){  var dataSplit = value.split(" ");
    var lastWord = dataSplit.pop();
    var toBlur = '<span class="blur">' + dataSplit.join(" ") +  '</span>'; 
     var output = toBlur + lastWord;
     return output; }

并在模板中传递以下内容：

{#storylines}
    <li>{text|bl|s}</li>    
{/storylines}

dust.js通过函数格式化文本

2 个答案: