Question

当我在html中渲染我的手柄模板时，看起来它实际上是在跳过填充“手柄栏”部分。我基本上打印带有标题和内容的消息，我正在使用“！each”帮助器来显示我的所有消息。我原本以为是因为它是因为它正在逃避它周围的html，所以我尝试使用三句柄栏{{{然而每个部分使用每个帮助器和三重藏匿处给我一个错误。我可能错误地使用了把手吗？

我用来呈现HTML和我的手柄模板的打字稿如下：

public static refreshData(data: any) {
        $("#indexMain").html(Handlebars.templates['main.hbs'](data));

        //helper function for upvote  button
        Handlebars.registerHelper('getUButton', function (id) {
            id = Handlebars.escapeExpression(id);

            return new Handlebars.SafeString(
                "<button type='button' class='btn btn-default up-button' id='u" + id + "'>Upvote</button>"
            );
        });

        //helper function for downvote button
        Handlebars.registerHelper("getDButton", function (id) {
            id = Handlebars.escapeExpression(id);

            return new Handlebars.SafeString(
                "<button type='button' class='btn btn-default down-button' id='d" + id + "'>DownVote</button>"
            );
        });

        // Grab the template script
        var theTemplateScript = $("#main-template").html();


        // Compile the template
        var theTemplate = Handlebars.compile(theTemplateScript);

        //get messages from server and add them to the context
        // This is the default context, which is passed to the template

        var context = {
            messages: data
        }
        console.log("context:")
        console.log(context);

        // Pass data to the template
        var theCompiledHtml = theTemplate(context);

        console.log(theCompiledHtml);

        // Add the compiled html to the page
        $("#messages-placeholder").html(theTemplate(context));


        //add all click handlers
        //get all buttons with id starting with u and set the click listerer
        $(".up-button").click((event) => {
            var id = $(event.target).attr("id").substring(1);
            main.upvote(id)
        });


        //get all buttons with id starting with d and set the click listerer
        $(".down-button").click((event) => {
            var id = $(event.target).attr("id").substring(1);
            main.downvote(id)
        });
    }

   
<script id="main-template" type="text/x-handlebars-template">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Current Messages</h3>
        </div>
        <div class="panel-body">
            <div class="list-group" id="message-list">
                <!-- for each message, create a post for it with title, content, upvote count, and upvote button -->
                {{#each messages}}
                    <li class="list-group-item">
                        <span class="badge">Vote Count: {{likeCount}}</span>
                        <h4 class="list-group-item-heading">{{title}}</h4>
                        <p class="list-group-item-text">{{content}}</p>
                        <div class="btn-group btn-group-xs" role="group" aria-label="upvote">
                            {{getUButton id}}
                        </div>
                        <div class="btn-group btn-group-xs" role="group" aria-label="downvote">
                            {{getDButton id}}
                        </div>
                    </li>
                {{/each}}
            </div>
        </div>
    </div>
</script>
<div id="messages-placeholder"></div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Post New Message</h3>
    </div>
    <div class="input-group">
        <span class="input-group-addon">Title</span>
        <input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle">
    </div>
    <div class="input-group">
        <span class="input-group-addon">Message</span>
        <input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage">
    </div>
    <div class="btn-group" role="group" aria-label="create">
        <button type="button" class="btn btn-default" id="postNewMessage">Post Message</button>
    </div>
    <span class="label label-danger" id="incompleteAcc"></span>
</div>

Answer 1

好的，那么提供给您模板的数据可能不是正确的形式。这是一个工作片段（非必需品被剥离）。传递到refreshData模板的数据必须是数组。确保它不是包含数组的对象。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>

<script>
    let refreshData = (data) => {
        // Grab the template script
        var theTemplateScript = $("#main-template").html();

        // Compile the template
        var theTemplate = Handlebars.compile(theTemplateScript);

        //get messages from server and add them to the context
        // This is the default context, which is passed to the template
        var context = {
            messages: data
        };
        console.log("context:", context);

        // Add the compiled html to the page
        $("#messages-placeholder").html(theTemplate(context));
    }

    $(() => {
        var data = [
            { likeCount: 3, title: 'My Title', content: 'Some content'},
            { likeCount: 0, title: 'My 2nd Title', content: 'Some other content'}
        ];
        refreshData(data);
    })


</script>

<script id="main-template" type="text/x-handlebars-template">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Current Messages</h3>
        </div>
        <div class="panel-body">
            <div class="list-group" id="message-list">
                <!-- for each message, create a post for it with title, content, upvote count, and upvote button -->
                {{#each messages}}
                <li class="list-group-item">
                    <span class="badge">Vote Count: {{likeCount}}</span>
                    <h4 class="list-group-item-heading">{{title}}</h4>

                    <p class="list-group-item-text">{{content}}</p>
                </li>
                {{/each}}
            </div>
        </div>
    </div>
</script>

<div id="messages-placeholder"></div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Post New Message</h3>
    </div>
    <div class="input-group">
        <span class="input-group-addon">Title</span>
        <input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle">
    </div>
    <div class="input-group">
        <span class="input-group-addon">Message</span>
        <input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage">
    </div>
    <div class="btn-group" role="group" aria-label="create">
        <button type="button" class="btn btn-default" id="postNewMessage">Post Message</button>
    </div>
    <span class="label label-danger" id="incompleteAcc"></span>
</div>

</body>
</html>

当我面对这样的问题时，我会消除不同的东西，直到我得到清晰或我删除的东西修复问题。现在我已经找到了问题所在。在您的情况下，问题可能是传递数据，因此验证。然后尝试剥离你的助手，看看它们是否会引起问题。

将把手呈现为HTML的问题

1 个答案: