1

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

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

<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 注入按钮而不是 MustacheJS 注入按钮？

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

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

4

1 回答 1

3

您的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');
    }
);

你会在这里找到一个更新的小提琴。

于 2013-07-07T18:08:39.627 回答