使用 mustache 显示对象数组中的第一个对象答案

【问题标题】：Display first object in object array using mustache使用 mustache 显示对象数组中的第一个对象
【发布时间】：2015-02-26 18:22:59
【问题描述】：

我是 Mustache 的新手，并试图弄清楚如何使用 mustache 在列表中显示第一个对象数组。我希望能够传递一个变量来决定使用 mustache 模板显示列表的哪个索引。例如：

var template = $('#testing_tmp').html();
        var dataId = 1;
        var html =  Mustache.to_html(template, projects[dataId]);
        $('#header').html(html);

在上面执行此代码将传递具有给定索引的数据并显示具有给定键的单个对象，而不是整个对象列表。

这是我目前的代码：

    <script id="testing_tmp" type="text/template">
        {{#proj}}
            <div>{{id}} go get some {{title}}</div>
        {{/proj}}
    </script>


$('body').on('click', '.logo', function(){
        var projects = { 
            "proj": [
                {
                    id:"1",
                    title:"Ronald",
                    description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                    technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                    projectLink:"http://www.google.com",
                    genre:"web-app",
                    images: [
                        {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                    ]
                },
                {
                    id:"2",
                    title:"Jake",
                    description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                    technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                    projectLink:"http://www.google.com",
                    genre:"web-app",
                    images: [
                        {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                    ]
                },
                {
                    id:"3",
                    title:"Benny",
                    description:"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like.",
                    technologiesUsed:"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0", 
                    projectLink:"http://www.google.com",
                    genre:"web-app",
                    images: [
                        {largePic:"img/projects/heller-recipes/thumb.jpg",desktopImg:"img/projects/heller-recipes/desktop.png",desktopMobile:"img/projects/heller-recipes/mobile.png"}
                    ]
                }
            ]
        };
        var template = $('#testing_tmp').html();
        //alert(template);
        var html =  Mustache.to_html(template, projects[1]);
        $('#header').html(html);
        });

【问题讨论】：

我需要更改项目对象的格式吗？或者他们是一种简单的方法，我还没有找到。我觉得应该有一个简单的解决方案。

标签： jquery templates mustache

【解决方案1】：

你可以这样做：

var html =  Mustache.to_html(template, { "proj" : projects.proj[1] });

在这里，您基本上只是将对象重组为看起来像 projects，但其中只有第二个对象。

【讨论】：