【问题标题】：Pass JSON returned from Handlebars Helper as parameter into Handlebars Partial将 Handlebars Helper 返回的 JSON 作为参数传递给 Handlebars Partial
【发布时间】：2017-12-10 17:06:23
【问题描述】：

我想设置一个部分来呈现一个通用的、可定制的模式。 {{> myModal }}.

我想通过发送一个对象从调用视图自定义模态。

我已经尝试过这里推荐的方法：Passing an array of objects to a partial - handlebars.js

这是我在视图中调用部分的代码：

{{# getJsonContext '
    {
        "id": "deleteModal",
        "title": "Are you sure?",
        "formId": "delete-form",
        "body": "Press Yes to delete this record.  Press No to cancel."
    }
'}}

    {{> myModal this }}

{{/ getJsonContext }}

这是我的助手：

getJsonContext: function(data, options) {
        console.log(data);                     <-- The result is correct.
        let jsonReturn = JSON.parse(data);
        console.log(jsonReturn.title);         <-- The result is correct.
        return jsonReturn;
},

这是我的部分：

<div class="modal fade" id="{{ id }}">
  <div class="modal-dialog">
    <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-light">
            <h4 class="modal-title">{{ title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Form -->
        <form id="{{ formId }}" method="post">

            <!-- Modal body -->
            <div class="modal-body">
                {{ body }}
            </div>

            <!-- Modal footer -->
            <div class="modal-footer rounded-bottom bg-light">

            </div>

        </form>

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

我希望部分视图能够呈现自定义模式。

部分似乎根本没有渲染。当我在浏览器中“查看页面源代码”时，在所有部分<html> 的位置，它显示的只是[object Object]。

如果我将{{> myModal this}} 放在helper 之外，“查看页面源代码”会显示所有模态的<html>, 但自然地，id、title、formId 和 body 都是空白的（null )。

【问题讨论】：

再次查看您引用的答案中的getJsonContext 助手。该示例中的 return options.fn(JSON.parse(data)); 与您的 return 语句之间存在很大差异。

标签： handlebars.js partial

【解决方案1】：

经过大量的反复试验和研究，我终于找到了问题所在。我必须在主视图对部分的调用中将 JSON 作为 named 参数传递。语法应该是：

{{> jeff-modal <anyVariableName> = getJsonContext }}

我完成并让我的通用 {{> jeff-modal }} 接受按钮列表，可以自定义。

模态现在可用作通用的、可自定义的、简单的模态，它可以在任何视图中呈现为部分，以要求用户按下 x 个按钮中的一个来做出选择。

示例

主（调用）视图有一个按日期顺序排列的日记账分录（交易）列表。对于每笔交易，都有一个可点击的“删除”图标。当用户按下图标时，模式打开。当模式打开时，我们需要知道要删除哪个事务。我们有它的_id。

在<html> 中设置好表和列并启动{{# each }} 迭代器后，以下是如何为每个事务设置“删除”图标。注意data-id 的值是如何设置为事务的_id 属性的：

<!-- table stuff up here -->

{{# each transactions}}    

  <tr class="journal-entry-row">

  <!-- some `<td>`'s -->

     <span class="journalData">
       <a href='#' class="open-deleteDialog"
                data-id="{{this._id}}" data-backdrop="static"
                data-toggle="modal" data-target="#deleteModal">

                     <span class="material-icons md-24 md-dark">delete</span>

       </a>
     </span>

  <!-- more table stuff -->

{{/ each }}

上面的材料图标可以在这里找到：https://material.io/icons/

“删除”是一个垃圾桶。

下面是为所有垃圾桶设置onclick的javascript。 注意事务的_id 如何从<html> 进入javascript通过data-id（上图）。（我认为这很聪明，谁想到的。）

另外，由于我们的自定义模态被分配了一个“删除表单”的id，我们可以让它设置模态的<form>action。

最后，添加一点 CSS 来突出显示被删除的行。

$(document).on("click", ".open-deleteDialog", function () {

     var myTransactionId = $(this).data('id');

     // Set form action to call delete with _id parameter
     $("#delete-form").attr("action", "/transaction/delete?_id=" + myTransactionId );

     // Highlight the selected row.
     $(this).closest(".journal-entry-row").addClass("table-warning");

});

现在，让我们回到<table> 结束后的调用视图。这是在车把辅助块中调用模式的地方（但仅在单击垃圾桶时）：

<!-- The Delete modal -->
{{# getJsonContext '
    {
        "id": "deleteModal",
        "title": "Are you sure?",
        "formId": "delete-form",
        "body": "Press \"Yes\" to delete this record.  Press \"No\" to cancel.",
        "buttons":
            [
                { "type": "submit", "onclick": "", "class": "btn btn-primary", "text": "Yes" },
                { "type": "button", "onclick": "removeHighlightEffect()", "class": "btn btn-secondary", "dataDismiss": "modal", "text": "No" }
            ]
    }'
}}

    {{> jeff-modal options = getJsonContext }}

{{/ getJsonContext }}

这是助手：

getJsonContext: function(data, options) {
        let jsonReturn = options.fn(JSON.parse(data));
        return jsonReturn;
},

最后，部分{{> jeff-modal }}：

<div class="modal fade" id="{{ id }}">
   <div class="modal-dialog">
     <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-light">
            <h4 class="modal-title">{{ title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Form -->
        <form id="{{ formId }}" method="post">

            <!-- Modal body -->
            <div class="modal-body">
                {{ body }}
            </div>

            <!-- Modal footer -->
            <div class="modal-footer rounded-bottom bg-light">
                {{# each buttons }}
                    <button type = "{{ type }}" onclick = "{{ onclick }}" class = "{{ class }}" data-dismiss = "{{ dataDismiss }}" >{{ text }}</button>
                {{/ each }}
            </div>

        </form>

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

我不确定我是否可以从同一个视图中使用不同的标题、正文、按钮等调用此模式的多个实例。为此可能需要进行一些调整，我不会担心它，直到需求出现了。

【讨论】：