javascript - JS无法在mustacheJS的产品上使用？

JSfiddle：http://jsfiddle.net/hugolpz2/QCjJD/9/

给定一个带有硬编码按钮，纯JS注入按钮和Mustache注入按钮的html锚，最终结果如下：

<div id="anchor">
    <button class="tpl html status0" data-lexeme="A">A</button>
    <button class="tpl html status0" data-lexeme="B">B</button>
    <button class="tpl PureJS status0" data-lexeme="A"></button><!-- injected with pure JS -->
    <button class="tpl PureJS status0" data-lexeme="B">B</button><!-- injected with pure JS -->
    <button class="tpl Mustache status0" data-lexeme="A">A</button><!-- injected with Mustache -->
    <button class="tpl Mustache status0" data-lexeme="B">B</button><!-- injected with  Mustache -->
</div>

给定参考数据，例如

var json = [
    { "id": "A",   "status": 0  },
    { "id": "B",   "status": 0  },
    { "id": "C",   "status": 1  },
    { "id": "AB",  "status": 1  },
    { "id": "ABC", "status": 1  },
    // { ... } +100 entries
];

给定JS / JQuery函数classUpdateFromData（），它从数据中bpdate按钮的类。

// classUpdateFromData():
function classUpdateFromData($set) {
    $($set).each(function (i) {  // <------------------------------ seems this is the trouble! Select html, js,but NOT mustache generated content!
        var lexeme = $(this).data('lexeme');
        var val = getJsonVal(json, lexeme);
        if (val.status === 1) {
            $(this).toggleClass('status1 status0');
        } else { /* nothing yet! */ }
    });
}

classUpdateFromData('#anchor > .tpl');

为什么我的函数仅更新硬编码的按钮和纯JS注入的按钮，而不更新MustacheJS注入的按钮？

如何修复使其适用于所有工具，包括Mustache创建的功能？

注意：classUpdateFromData（）在模板函数后被触发。

最佳答案

您的injectTPL()函数是异步的：它实际上在获取JSON数据和呈现模板之前返回。

查看对$.getJSON()的调用：它接受一个回调函数，并在数据准备就绪时调用它。该函数依次呈现模板并将结果标记附加到文档中。

由于classUpdateFromData()是在injectTPL()之后立即调用的，因此它将在调用该回调函数之前运行。

您可以从传递给classUpdateFromData()的回调中调用$.getJSON()，或者更一般地说，重构injectTPL()，以便它本身接受回调并从传递给$.getJSON()的回调中调用它：

function injectTPL(url, list, tplId, anchor, callback) {
    console.log("Mustache TPL = Fired !");
    $.getJSON(url, function(data) {
        for (var i = 0; i < list.length; i++) {
            var lexeme = list[i]; // "火山口";
            var template = '{{#CFDICT}}{{#'+ lexeme +'}}' + $(tplId).html()
                         + '{{/'+ lexeme +'}}{{/CFDICT}}';
            var info = Mustache.to_html(template, data);
            $(anchor).append(info);
        }
        callback();  // Invoke our own callback.
    });
    console.log("Mustache TPL = End !");
}

然后，您可以从传递给classUpdateFromData()的回调中调用injectTPL()，它将在适当的时间被调用：

injectTPL(
    'http://d.codio.com/hugolpz/getJson--/App/data/cfdict.json',
    l, '#CFDICT-tpl', '#anchor', function() {
        classUpdateFromData('#anchor > .tpl');
    }
);

您将找到更新的小提琴here。

关于javascript - JS无法在mustacheJS的产品上使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17514507/