appeler une fonction avec des arguments dans mustache javascript

Question

Est-il possible d'appeler une fonction avec des arguments avec Mustache.js

{{somefunction(somevalue)}}
Merci.

Answer 1

Consultez la section sur les lambdas à https://mustache.github.io/mustache.5.html

Bloc de modèles de moustaches :

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

Bloc fonctionnel :

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

Sortie :

I passed in this value: someValue

Answer 2

Pour moi, cela fonctionne :

ajouter la fonction générale FUNC à json (données) :

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

javascript régulier sur la page :

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

Bloc de modèle Mustache appelant la fonction javascript habituelle avec des valeurs de balises comme arguments :

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

vous pouvez également appeler une fonction définie dans le json :

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

Answer 3

Pour contourner ce problème, vous pouvez stocker la valeur dans l'identifiant de l'élément.

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

<script>    
function somefunction(value){

}  
</script>

Answer 4

Si vous voulez que le contenu du script soit exécuté après l'insertion du balisage dans le domaine, vous devez utiliser une bibliothèque qui fera de même, comme jquery.

Essayez-le ici :

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

Aussi si vous voulez invoquer une autre méthode dans votre fichier script. Tout ce que vous devez faire est d'appeler la fonction en fonction de la portée de cette fonction et si elle a été préchargée dans le dom.

J'espère que cela vous aidera.

P.S : notez l'échappement de la balise script dans le balisage du modèle.

Answer 5

Comme j'envoie les données de mon modèle à partir d'une API en JSON, l'encodage d'une fonction dans le JSON est compliqué. J'ai donc créé une fonction simple pour analyser la fonction arbitraire avec les paramètres de la réponse API afin d'appeler les fonctions JS existantes. Les commentaires ci-dessous expliquent la fonctionnalité.

Le TLDR ; l'analyse syntaxique des fonctions

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

Le contexte dans lequel il est utilisé.

données de réponse 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);
                }
            }
        }
    ]
}

fonction api reposnse parser (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
    });
});

fonction de rendu (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);
            });
        }
    }
}

Fonction js à appeler via la réponse API (main.js)

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

templates loader - charge le modèle html au chargement de la page (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
        });
    });
}

exemple de modèle (templates.html)

<script id="load_sites" type="text/html">
    {{#sites}}
        <div data-siteid="{{siteID}}">
            {{siteName}}</small>
        </div>
    {{/sites}}
</script>