如何读取多维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" 属性并为每个语言环境创建一个大开关来选择正确的图片。如果有人可以帮助我？

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>

运行观看上面的代码片段。

如何读取多维javascript对象？

How to read a multidimensionnal javascript object?

javascript

for-loop

object

multidimensional-array

mustache