ส่ง JSON ที่ส่งคืนจากตัวช่วยแฮนด์บาร์เป็นพารามิเตอร์ไปยังแฮนด์บาร์บางส่วน

ฉันต้องการตั้งค่าบางส่วนเพื่อเรนเดอร์โมดอลทั่วไปที่ปรับแต่งได้ {{> myModal }}.

ฉันต้องการปรับแต่งโมดอลจากมุมมองการโทรโดยการส่งออบเจ็กต์

ฉันได้ลองใช้วิธีการตามที่แนะนำที่นี่: การส่งผ่านอาร์เรย์ ของวัตถุไปยังบางส่วน - 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}} ด้านนอก ของตัวช่วย "View Page Source" จะแสดง <html>, ของ modal ทั้งหมด แต่โดยธรรมชาติแล้ว id, title, formId และเนื้อหาทั้งหมดจะว่างเปล่า (null)


handlebars.js partial
person Jeff Matthews    schedule 10.12.2017    source แหล่งที่มา
comment
ดูตัวช่วย getJsonContext อีกครั้งในคำตอบที่คุณอ้างอิง มีความแตกต่างอย่างมากระหว่าง return options.fn(JSON.parse(data)); ในตัวอย่างนี้และคำสั่ง return ในตัวคุณ   -  person 76484    schedule 11.12.2017

คำตอบ (1)


arrow_upward
0
arrow_downward

หลังจากที่ใช้สมองอย่างหนักกับการลองผิดลองถูกและการค้นคว้ามากมาย ในที่สุดฉันก็พบปัญหา ฉันต้องส่ง JSON เป็นพารามิเตอร์ ชื่อ ในการเรียกมุมมองหลักไปยังบางส่วน ไวยากรณ์ควรเป็น:

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

ฉันดำเนินการเสร็จแล้วและทำให้ {{> jeff-modal }} ทั่วไปของฉันยอมรับรายการปุ่มต่างๆ ซึ่งสามารถปรับแต่งได้

ปัจจุบันโมดอลมีประโยชน์ในฐานะโมดอลทั่วไปที่ปรับแต่งได้และเรียบง่าย ซึ่งสามารถแสดงผลเป็นบางส่วนจากภายในมุมมองใดก็ได้ เพื่อให้ผู้ใช้กดปุ่มใดปุ่มหนึ่งจากจำนวน x เพื่อเลือก

ตัวอย่าง

มุมมองหลัก (การโทร) มีรายการบันทึกประจำวัน (ธุรกรรม) ตามลำดับวันที่ สำหรับแต่ละธุรกรรมจะมีไอคอน "ลบ" ที่คลิกได้ โมดอลจะเปิดขึ้นเมื่อผู้ใช้กดไอคอน เมื่อเปิด Modal เราจำเป็นต้องรู้ว่าธุรกรรม ใด ที่จะลบ เรามี _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='/th#' 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 สำหรับถังขยะทั้งหมด สังเกตว่าธุรกรรม _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>

ฉันไม่แน่ใจว่าฉันสามารถเรียกโมดอลนี้หลายอินสแตนซ์จากมุมมองเดียวกันโดยใช้ชื่อ เนื้อหา ปุ่ม ฯลฯ ที่แตกต่างกันได้หรือไม่ อาจต้องมีการปรับแต่งบางอย่างเพื่อสิ่งนั้น และฉันจะไม่กังวลเกี่ยวกับมันจนกว่าจะมีความจำเป็นเกิดขึ้น

person Jeff Matthews    schedule 11.12.2017