实施例

Question

我想设置一个部分来渲染一个通用的，可自定义的模态。 {{> myModal }}。

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

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

以下是我在视图中调用partial：

的代码

{{# 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>

我希望局部视图呈现自定义模态。

部分似乎根本没有呈现。当我＆＃34;查看页面来源＆＃34;在浏览器中，代替所有部分<html>，所有显示的都是[object Object]。

如果我将{{> myModal this}} 放在帮助者的之外，＆＃34;查看页面来源＆＃34;显示所有模态<html>,但自然地，id，title，formId和body都是空白的（null）。

Answer 1

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

{{> 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>（上方）从data-id进入javascript 旅程。（我认为这很聪明，无论谁想到它。）

此外，由于我们的自定义模式已分配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>结束后的调用视图。这是在把手辅助块内调用模态的地方（但仅在点击垃圾桶时）：

 {{# 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">  <div class="modal-header bg-light"> <h4 class="modal-title">{{ title }}</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <form id="{{ formId }}" method="post">  <div class="modal-body"> {{ body }} </div>  <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>

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

将Handlebars Helper返回的JSON作为参数传递到Handlebars Partial

1 个答案:

实施例