我想通过使用把手模板引擎将JSON数据呈现到前端

时间:2018-12-08 11:07:03

标签: javascript node.js json express handlebars.js

我有一个在Node js上运行的网站。前端使用车把渲染。 电影的url和数据以JSON格式(硬编码)显示,我想根据已单击的电影将此硬编码数据呈现到视图中。单击电影时,它会根据电影名称和年份更新网址,但会显示不同的电影页面。

前端文件的名称为:movie.hbs 它从以下位置获取数据:movie .js 因此,在movie.js中,我们具有对象的JSON数组,并且具有一个属性

"movie": {
        "id": 5,
        "title": "Los increibles 2",
        "overview": "Helen debe liderar una campaña a fin de que los superhéroes retornen, mientras que Bob vive su vida \"normal\" con Violet, Dash y el bebé Jack-Jack. Su misión se marcha a pique cuando aparece un nuevo villano con un refulgente plan que lo amenaza todo. Mas los Parr no se asustarán y menos teniendo a Frozono de su parte.",
        "original_title": "Incredibles 2",
        "tagline": "Back to work.",
        "popularity": 120.785,
        "poster_path": "/x1txcDXkcM65gl7w20PwYSxAYah.jpg",
        "backdrop_path": "/mabuNsGJgRuCTuGqjFkWe1xdu19.jpg",
        "runtime": 118,
        "budget": 200000000,
        "revenue": 868429911,
        "adult": 0,
        "imdb_id": "tt3606756",
        "facebook_id": "PixarTheIncredibles",
        "instagram_id": "TheIncredibles",
        "twitter_id": "TheIncredibles",
        "homepage": "https://movies.disney.com/incredibles-2",
        "vote_count": 3578,
        "vote_average": 7.6,
        "movie_status_id": 1,
        "release_date": "2018-06-14T03:00:00.000Z",
        "release_year": 2018,
        "release_month": 6,
        "release_day": 14,
        "genres": [{
                "id": 1,
                "name": "Acción",
                "hash": "accion",
                "link": "/categoria/accion/",
                "index": 1,
                "total": 4,
                "isFirst": true,
                "isLast": false
            },
            {
                "id": 2,
                "name": "Aventura",
                "hash": "aventura",
                "link": "/categoria/aventura/",
                "index": 2,
                "total": 4,
                "isFirst": false,
                "isLast": false
            },
            {
                "id": 3,
                "name": "Animación",
                "hash": "animacion",
                "link": "/categoria/animacion/",
                "index": 3,
                "total": 4,
                "isFirst": false,
                "isLast": false
            },
            {
                "id": 8,
                "name": "Familia",
                "hash": "familia",
                "link": "/categoria/familia/",
                "index": 4,
                "total": 4,
                "isFirst": false,
                "isLast": true
            }

,只有每个电影都呈现此电影对象,但是我想要与该特定电影相关的数据。 ps:上面的对象只有这部电影,但是其他电影数据存在于另一个名为home.js的文件中,它具有所有电影的所有json数据。我想为每部电影渲染该数据。

<!DOCTYPE html>

{{> head}}

    

    <div class="all divcen w990px">

        {{>header}}
        <div id="bd" class="clf">
            <div id="bd" class="bkcnt bkcnt_int br1px brdr10px clf">

                <table>
                    <tbody>
                        <tr>
                            <td>

                                <div class="titbkcnt bgdeg7 bold brdr10px bxshd2 fs18px ico_b mgbot15px p_relative white">
                                    <a title="{{movie.title}}">
                                        {{site_keywords.movie_title}} {{movie.title}} ({{movie.release_year}})
                                    </a>
                                </div>

                                <div class="movie-info-wrap">
                                    <div class="intsd f_left">
                                        <div class="peli_img_int mgbot10px">
                                            <img style="width:175px;height:268px" src="
                                            {{#if movie.poster_path}}
                                            https://image.tmdb.org/t/p/w154/{{movie.poster_path}}
                                            {{else}}
                                            /static/img/default_poster.png
                                            {{/if}}
                                            "
                                                title="{{movie.title}} ({{movie.release_year}})" alt="{{movie.title}} ({{movie.release_year}})">
                                        </div>
                                    </div>

                                    <div class="content f_right">
                                        <div class="details mgbot20px p_relative">
                                            <ul class="dtalist fs14px bold">
                                                <li class="ico_b"><span>Titulo Original:</span> {{movie.title}}</li>
                                                <li class="ico_b"><span>Genero/s:</span>
                                                    {{#forEach movie.genres}}
                                                    {{name}}{{#unless isLast}},{{/unless}}
                                                    {{/forEach}}
                                                </li>
                                                <li class="ico_b"><span>Año:</span> {{movie.release_year}}</li>
                                                <li class="ico_b"><span>Idioma:</span>
                                                    <img src="/static/img/es.png">
                                                    {{#compare ../language_iso "==" "es-ES"}}
                                                    Castellano
                                                    {{else}}
                                                    Latino
                                                    {{/compare}}
                                                </li>
                                                <li class="ico_b"><span>Calidad:</span> HD </li>
                                            </ul>

                                        </div>
                                        <div class="tit_cnt bold fs18px">Sinopsis de {{movie.title}}</div>
                                        <div class="sinoptxt mgbot15px">
                                            <p>
                                                {{movie.overview}}
                                            </p>
                                            <br>
                                        </div>
                                        <div style="text-align: center;"><iframe width="0" height="90" border="0"
                                                frameborder="0" scrolling="no"></iframe></div>

                                    </div>
                                </div>

                            </td>
                        </tr>

                        {{#if movie.videos}}
                        <tr>
                            <td>

                                <div class="pel_tra_bnr brdr10px bkcontentint clf mgbot15px">

                                    <div class="pel_tra2 f_left">
                                        <ul class="tabs menu bold bxshd1 cntclsx f_left_lia fs14px liabrdr10px lnht30px txt_cen white clf mgbot10px">
                                            {{#forEach movie.videos}}
                                            <li js-tab-trigger="{{index}}" style="margin-bottom:8px; margin-right : 8px;"
                                                class="{{#if isFirst}} act {{/if}} first_lst last_lst"><a>Ver
                                                    Pelicula Opcion {{index}}</a></li>
                                            {{/forEach}}
                                        </ul>

                                        <div class="tab_container">
                                            <div id="yt-videos" class="tab_content  br1px brdr10px bkcnt pd15px fs11px">

                                                <div class="player-wrap">
                                                    {{#forEach movie.videos}}
                                                    <div class="{{#if isFirst}} active {{/if}}">
                                                        <button class="play-btn" to-play="{{key}}">
                                                            <img src="/static/img/play-button.svg" alt="">
                                                        </button>
                                                        <iframe width="100%" height="100%" src="" frameborder="0"
                                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                            allowfullscreen>
                                                        </iframe>
                                                    </div>
                                                    {{/forEach}}
                                                </div>



                                                <div id='timeout-msg' class="hidden">
                                                    <div>
                                                        <img text="Streaming Gratuito en HD - {{ellipsis movie.title 47}} - {{language_name}}"
                                                            src="" alt="">
                                                        <img text="Por favor espere :" src="" alt="">
                                                    </div>
                                                    <div>
                                                        <img height="35px" style="margin: 8px 0;" id='timeout-seconds'>
                                                    </div>

                                                    <img style="margin-top: 8px" width="48" src="/static/img/loader_dots.svg"
                                                        alt="">
                                                </div>


                                                <div style="text-align:center;">
                                                    {{!-- <iframe src="https://www.locopelis.tv/video2/WVVoU01HTklUVFpNZVRsMlkwZFdkV0pIT1doYVF6VnFZbms1YkdKWFNteGFRemxoWW0weGJGUXdaRmRhYldSaFVWTTVUMDFJV1hoT1F6VnJUVE5OZUUwelNqQk5SamgwV0ROa00yUjVOWE5pTWs1MlkwZFdjMkZZVFhWWk1qbDBURzB4ZDA1QlBUMD0rUg==.html"
                                                        scrolling="no" frameborder="0" width="700" height="430"
                                                        allowfullscreen="true"></iframe>
                                                    --}}
                                                    {{!-- <div style="text-align: center;"><iframe width="728"
                                                            height="90" border="0" frameborder="0" scrolling="no"></iframe></div>
                                                    --}}

                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </td>
                        </tr>
                        {{/if}}

                    </tbody>
                </table>
                <div class="intsd f_left">
                    <div class="bnr txt_cen">
                    </div>
                </div>
                <div class="content f_right">
                    <div class="tagsvid txt_cen bgdeg9 brdr10px bold fs16px lnht20px mgbot15px">
                        Ver <strong>{{movie.title}}</strong> ({{movie.release_year}}), Watch <strong>{{movie.title}}</strong>
                        ({{movie.release_year}})
                        free, <strong>{{movie.title}}</strong> ({{movie.release_year}}) sin limite de tiempo,
                        <strong>La novia
                            del desierto</strong>
                        ({{movie.release_year}}) subtitulada online, <strong>{{movie.title}}</strong>
                        ({{movie.release_year}}) online, Ver
                        <strong>La novia
                            del desierto</strong> ({{movie.release_year}}) online, Ver <strong>{{movie.title}}</strong>
                        ({{movie.release_year}})
                        online flv,
                        Ver <strong>{{movie.title}}</strong> ({{movie.release_year}}) no megavideo, Ver <strong>La
                            novia del
                            desierto</strong>
                        ({{movie.release_year}}) online gratis, <strong>{{movie.title}}</strong>
                        ({{movie.release_year}}) online latino, <strong>La
                            novia del
                            desierto</strong> ({{movie.release_year}}) online español, Ver <strong>{{movie.title}}</strong>
                        ({{movie.release_year}}) online
                        en español, Ver <strong>{{movie.title}}</strong> en español online.
                    </div>
                </div>
            </div>


            {{>footer}}


        </div>

    </div>

</div>

这是hbs文件,可为您单击的每部电影渲染

0 个答案:

没有答案