如何读取一个多维javascript对象

Question

首先，这是我的Javascript对象:

var languages = {
    languages: [
        { name: "French", locale: "FR", id: "-1" },
        { name: "English", locale: "IT", id: "-2" },
        { name: "Spanish", locale: "ES", id: "-3" },
        { name: "Zoulou", locale: "ZL", id: "-4" },
        { name: "Italian", locale: "EN", id: "-5" }
    ]
};

我正在使用Mustache.js生成语言按钮:

function generateLanguages(languages) {
  var output = $("#languages-output");
  var template = "{{#languages}}<button id={{id}}><img src=#FLAG onclick='changeLanguage({{locale}})' /><p>{{name}}</p></button>{{/languages}}";
  html = Mustache.render(template, languages);
  output.append(html);}

我也有一个文件夹包含所有的标志图像称为flags(例如flags/English.png)。我试图通过添加相应的标志来生成按钮。我真的不知道怎么做，我想在for循环中使用Javascript对象的"locale"属性，并为每个locale创建一个大开关来选择正确的图像。有谁能帮我吗?

http://jsfiddle.net/lBrowz/7w5grype/

Answer 1

一些改进和想法:

• 将模板移动到HTML中。那是他们应该在的地方。通过它们的ID从JS中引用它们。当模板在JavaScript之外时，修改和考虑模板要容易得多。
也许对语言使用标志并不是最好的选择。有时，一种语言不能准确地用旗帜表示(参见祖鲁语，我选择用莫桑比克的旗帜表示祖鲁语，但这可能不是您的用户所期望的。如果你仔细想想，英语也是如此。无论如何，不是每种语言一个标志图像，而是使用包含所有标志的单个图像，然后使用CSS精灵来显示选定的标志。我在这里使用了这个项目:http://tkrotoff.github.io/famfamfam_flags/
• 使用data-*属性在元素中存储额外信息。
• 使用事件委托来处理点击。永远不要使用内联事件处理程序(如onclick)。

var languages = {
    languages: [
        { name: "French", locale: "FR", id: "-1", cls: "famfamfam-flag-fr" },
        { name: "English", locale: "IT", id: "-2", cls: "famfamfam-flag-gb" },
        { name: "Spanish", locale: "ES", id: "-3", cls: "famfamfam-flag-es" },
        { name: "Zoulou", locale: "ZL", id: "-4", cls: "famfamfam-flag-mz" },
        { name: "Italian", locale: "EN", id: "-5", cls: "famfamfam-flag-it" }
    ]
};
function changeLanguage(locale) {
    $("#locale").text(locale);
}
$(function () {
    var languagesTemplate = $("#languages-template").html();
    $("#languages-output").html( Mustache.render(languagesTemplate, languages) );
    $(document).on("click", ".language-button", function () {
        var locale = $(this).data("locale");
        changeLanguage(locale);
    });
});

.language-button {
    width: 5em;
    height: 4em;
    margin: 3px;
}
.language-button > span {
    display: inline-block;
    margin: 2px;
}

<link href="http://tkrotoff.github.io/famfamfam_flags/famfamfam-flags.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="languages-output"></div>
<div id="locale"></div>
<script type="text/x-handlebars-template" id="languages-template">
{{#languages}}
    <button id="{{id}}" class="language-button" data-locale="{{locale}}">
        <span class="{{cls}}"></span>
        <span>{{name}}</span>
    </button>
{{/languages}}
</script>

运行上面的代码片段，查看它的运行情况