Как исправить TypeError: undefined не является объектом (оценивает 'HTML_TEMP.split') при использовании miranda.js для замены строк из json - PullRequest
Новая
       8

Как исправить TypeError: undefined не является объектом (оценивает 'HTML_TEMP.split') при использовании miranda.js для замены строк из json

0 голосов
/ 30 марта 2019

Я пишу «Клон App Store» и столкнулся с проблемой при использовании Miranda.js для замены некоторых строк файлом json. Приведенные примеры работают, но когда я копирую их код в мой, они выдают эту ошибку (я понимаю, когда делаю так, как написано в документации). Кто-нибудь знает как это исправить?

Это мой index.html (я знаю, что я должен также включить другие файлы, но проблема должна возникать, другие файлы js предназначены для добавления фонов и т. Д.): 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="js/jquery.miranda.js"></script>

    <script>
            var data = {"description": "jQuery"};
            $("#demo").mirandajs(data);

        </script>

    <title>App Store</title>
  </head>
  <body>
        <div id="boxPeople" style="display: none;">
                <h1>[[name]]</h1>
                <h2> [[lastname]]</h2>
        </div>
      <main>
        <div class="row container my-4">
            <h1 class="text-left" class="">Today</h1>
        </div><div class="row container one" id="1">
                <div class="pay-now">
                        <div class="header">
                            <h5>App Store</h5><a href="#" class="cancel">Cancel</a>
                        </div>
                        <div class="app-overview-pay">
                            <img src="img/youtube.png" alt="" class="app-icon">
                            <h4 class="app-name">App Name</h4>
                            <p class="subtitle">App subtitle</p>
                        </div>
                        <div class="account">Account: <span class="email"></span></div>
                    </div>
            <a href="#" class="card-trigger-one">
        <div class="card app-promo card-one" app-promo back="img/unsplash.jpg">
            <div class="content">
                <b class="grey-text">APP CULTURE</b>
                <h1 class="grey-text-lighter">Bringing Coders Together</h1>
                <a href="#" class="close hidden"><i class="fas fa-times"></i></a>
                <p class="bottom-text grey-text-lighter">Tap to meet the two teens behind Patrik's vibrant coding community.</p>
                <div class="description-page"> <div class="container">
                <p><b>The best thing</b> about playing games in iMessages? Bantering between turns. Wheter it's bowling or battleships, here's how to add some friendly competition to your chat threads.</p>
                <ul class="apps-list">
                    <li class="app">
                        <img class="app-icon" src="img/youtube.png" alt="">
                        <h4 class="app-name">Youtube</h4>
                        <p class="subtitle grey-text">Videos, Music etc.</p>
                        <div class="btn-download light-grey">Get</div>

                    </li>
                </ul>
            </div>
            </div>
            </div>
        </div>
    </a>

    </div>
    <div class="row container two" id="two">
            <a href="#two" class="card-trigger-two">
        <div class="card app-promo card-two" back="img/Vetřelci-cover.jpg">
            <div class="content">

                <h1 class="grey-text-lighter lower"><b>GAME <br> OF THE <br> DAY</b></h1>
                <a href="#" class="close hidden"><i class="fas fa-times"></i></a>


            </div>
            <div class="bottom-bar black">
                <img src="img/246x0w.jpg" alt="" class="app-icon-bottom-bar">
                <h5 class="bottom-text-bar grey-text-lighter">Alien: Blackout</h5>
                <p class="bottom-text-bar grey-text-lighter">Space Survival Horror</p>
                <a href="" class="btn-download">$2.99</a>
            </div>
                <p class="">[[description]]</p>
            </div>
            </div>
        </div>
    </a>

    </div>

</main>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <script>
        $( function() {
        $(".card-trigger-one").click(function() {
            $(".one").removeClass("container, row");
            //$(".one").removeClass("container");
            $(".card-one").addClass("fullscreen");
            $(".close").removeClass("hidden");
            $(".description-page").addClass("fullscreen");

        });
        });
        $( function() {
        $(".close").click(function() {
            $(".one").addClass("row, container");
            //$(".one").addClass("container");
            $(".card-one").removeClass("fullscreen");
            $(".close").addClass("hidden");
            $(".description-page").removeClass("fullscreen")
        });
        });
    </script>
    <script>
            $( function() {
            $(".card-trigger-two").click(function() {
                $(".two").removeClass("container, row");
                //$(".one").removeClass("container");
                $(".card-two").addClass("fullscreen");
                $(".close").removeClass("hidden");
                $(".description-page-two").addClass("fullscreen");

            });
            });
            $( function() {
            $(".close").click(function() {
                $(".two").addClass("row, container");
                //$(".one").addClass("container");
                $(".card-two").removeClass("fullscreen");
                $(".close").addClass("hidden");
                $(".description-page-two").removeClass("fullscreen")
            });
            });
        </script>
        <script>
                $( function() {
                $(".btn-download").click(function() {
                    $(".pay-now").css("visibility", "visible");
                    $(".pay-now").css("bottom", "1em");
                    //$(".card-one").addClass("fullscreen");
                    //$(".close").removeClass("hidden");
                    //$(".description-page").addClass("fullscreen");

                });
                });
                $( function() {
                $(".cancel").click(function() {
                    $(".pay-now").css("bottom", "-100%");
                    $(".pay-now").css("visibility", "hidden");

                    //$(".card-one").addClass("fullscreen");
                    //$(".close").removeClass("hidden");
                    //$(".description-page").addClass("fullscreen");

                });
                });
            </script>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="js/content-parse.js"></script>
            <script src="js/content-append.js"></script>


  </body>
</html>

Пожалуйста, обратите внимание, что он не закончен и не запутан до чертиков, я нахожусь в процессе создания его модульным и пригодным для сценариев, но это сдерживает меня.

.mirandajs () должен заменить любые строки, которые заключены в [[]] и находятся в массиве, который вы передаете ему, но, как вы можете видеть, в моем случае он ничего не заменит и просто выдаст ошибку. Он должен заменить [[description]] на «jQuery», но это не так. Я использую Safari, но это происходит и в Chrome.

...