Question

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

{{somefunction(somevalue)}}

谢谢

Answer 1

查看http://mustache.github.com/mustache.5.html

上有关Lambdas的部分

Mustache模板块：

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

功能块：

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

输出：

I passed in this value: someValue

Answer 2

如果你希望在插入标记后执行脚本内容，你应该使用一些像jquery一样的库。

在这里试试这个：

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

另外，如果要在脚本文件中调用其他方法。您需要做的就是调用该函数，具体取决于该函数的范围以及是否已预先加载到dom中。

希望这有帮助。

P.S：注意模板标记中脚本标记的转义

Answer 3

对我来说这很有效：

将通用函数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}}

Answer 4

稍微解决一下，您可以将值存储在元素的 id 中

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

<script>    
function somefunction(value){
            
}  
</script>

Answer 5

当我从 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>

Answer 6

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

{{#items}}
  <script>{{funcName}}("{{url}}");</script>
{{/items}}

在胡子javascript中使用参数调用函数

6 个答案: