61

是否可以使用Mustache.js调用带有参数的函数 

{{somefunction(somevalue)}}
谢谢你

4

6 回答 6

61

在https://mustache.github.io/mustache.5.html上查看关于 Lambdas 的部分

小胡子模板块：

{{#someFunction}}someValue{{/someFunction}}

功能块：

someFunction : function () {
  return function(val, render) {
    return "I passed in this value: " + render(val);
  };
}

输出：

I passed in this value: someValue
于 2011-07-27T18:19:52.620 回答
2

对我来说这有效：

将通用函数 FUNC 添加到 json（数据）：

 data.FUNC = function(){
                return function(val, render){
                    var values = JSON.parse(render(val));
                    return window[values.FUNCNAME].apply(this, values.FUNCARGS);
                };
            };

页面上的常规 javascript：

 function foo(arg1, arg2){
    return "Arg1 is " + arg1 +  " and Arg2 is " + arg2;
};

使用标签值作为参数调用常规 javascript 函数的 Mustache 模板块：

{{#FUNC}}{"FUNCNAME":"foo", "FUNCARGS":["{{page}}","{{title}}"]}{{/FUNC}}

您还可以调用 json 中定义的函数：

{{#calljsfunction}} {{#FUNC}}{"FUNCNAME":"{{calljsfunction}}", "FUNCARGS":["{{page}}","{{title}}"]}{{/FUNC}}{{/calljsfunction}}

于 2017-12-12T11:37:04.223 回答
1

如果您希望在将标记插入 nito dom 后执行脚本内容，您应该使用一些类似 jquery 的库。

在这里试试这个：

http://jsfiddle.net/anilkamath87/GBP8N/

此外，如果您想在脚本文件中调用其他方法。您需要做的就是根据该函数的范围以及它是否已预加载到 dom 中调用该函数。

希望这可以帮助。

PS：注意模板标记中script标签的转义

于 2011-07-29T08:53:56.877 回答
1

一点解决方法，您可以将值存储在元素的 id 中

<button id="{{value}}" onclick="somefunction(id)">Click</button>

<script>    
function somefunction(value){
            
}  
</script>
于 2021-02-17T15:17:26.117 回答
0

当我从 API 发送模板数据时，对 JSON 编码的 JSON 中的函数很混乱，所以我创建了一个简单的函数来解析带有来自 API 响应的参数的任意函数，以调用现有的 JS 函数。下面的评论解释了该功能。

TLDR；函数解析

    $.each(funcs, function (funcName, args) {
        window[funcName].apply(null, args);
    });

使用它的上下文。

api响应数据

{
    "templatesList": [
        {
            "load_sites": {  // the template key - see load_templates()
                "target": "#main",  // the target css selector
                "append": false,        // whether to append to, or set content of css selector
                "data": {               // mustache template data
                    "sites": [
                        {
                            "siteID": "1",
                            "siteName": "Mr Bean House",
                        },
                        {
                            "siteID": "2",
                            "siteName": "Bob the Builder House",
                        }
                    ]
                },
                "funcs": {   // function to call after template insertion
                    "sites_load": [1, 2]   // function sites_load(1,2);
                }
            }
        }
    ]
}

api reposnse 解析器函数(main.js)

$.each(apiResponse.templatesList, function (ti, templateObject) {   // multiple responses in any API response
    $.each(templateObject, function (templateKey, template) {           // break up each into more readable chunks
        render_template( template.target, templateKey, template.data, template.append, template.funcs );  // call the renderer function
    });
});

渲染器函数（main.js）

function render_template(target, templateKey, templateData, append, funcs) {
    if (typeof templates_html[templateKey] !== "undefined") {  // see function load_templates()
        if (append) {  // append template
            $(target).append( Mustache.to_html( templates_html[templateKey], templateData ) );
        } else {  // set template as content
            $(target).html( Mustache.to_html( templates_html[templateKey], templateData ) );
        }
        
        // parse functions
        if(funcs){
            $.each(funcs, function (funcName, args) {
                window[funcName].apply(null, args);
            });
        }
    }
}

要通过 API 响应调用的 js 函数（main.js）

function sites_load(loadJobs, loadProgress){
    console.log("load jobs for site", loadJobs);
    console.log("load progress for site", loadProgress);
}

模板加载器 - 在页面加载时加载模板 html (main.js)

// global
templates_html = {};

// load templates html file using the <script id> for the object keys
function load_templates() {
    templates_html = {};
    $.get("templates.html", function (templates) {
        $(templates).filter("script").each(function (templateIndex, templateHTML) {
            var id = $(templateHTML).attr("id");  // id from script tag
            templates_html[id] = $(th).html(); // assign html content to object key
        });
    });
}

示例模板(templates.html)

<script id="load_sites" type="text/html">
    {{#sites}}
        <div data-siteid="{{siteID}}">
            {{siteName}}</small>
        </div>
    {{/sites}}
</script>
于 2021-01-13T04:32:39.610 回答
-3

您是否尝试调用函数作为解析小胡子代码的一部分？或生成输出，这将调用 JavaScript 函数？例如，这将输出调用该函数的 HTML（我相信）。

{{#items}}
  <script>{{funcName}}("{{url}}");</script>
{{/items}}
于 2011-05-18T17:13:44.207 回答