javascript - JS 不适用于 mustacheJS 的产品？

Question

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

给定一个带有硬编码按钮、纯 JS 注入(inject)按钮和 Mustache 注入(inject)按钮的 html anchor ，最终结果如下:

<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()，它从数据中更新按钮的类。

// 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 注入(inject)按钮而不更新 MustacheJS 注入(inject)按钮？

如何修复使其适用于所有函数，包括 Mustache 创建的函数？

注意:classUpdateFromData() 在模板函数之后触发。

Answer 1

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

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

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

您可以从传递给 $.getJSON() 的回调中调用 classUpdateFromData()，或者更一般地，重构 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 !");
}

然后您可以从传递给 injectTPL() 的回调中调用 classUpdateFromData()，它会在正确的时间被调用:

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

你会发现一个更新的 fiddle here .