Knockout.js Binding param กับ Data-Target return object แทน text (Accordion)

ใหม่สำหรับ Knockout.Js และเพิ่งจะได้รับความสนใจจากการผูกข้อมูลหลังจากสามวัน ...

ฉันได้สร้างหีบเพลงแบบไดนามิกแล้วและเมื่อทำการเชื่อมโยงข้อมูลกับ attr: {'data-target': '#' + RecipeName 'ฉันได้รับ Data-target = # [object object] ฉันเข้าใจว่าฉันสามารถคืนค่า ชื่อของพารามิเตอร์ถ้าฉันใช้ data-bind = "text: RecipeName" (แต่ฉันต้องต่อท้าย # เพื่อให้หีบเพลงของฉันเปิดได้ใน Id ที่ถูกต้อง .. )

ฉันดูออนไลน์แล้วและดูเหมือนจะไม่พบคำตอบที่เพียงพอ ฉันได้ลองใช้เครื่องมือ google dev เพื่อเปลี่ยน # [object object] เป็นค่าที่ฉันคาดหวังและมันก็ใช้ได้ดี

มีใครช่วยอธิบายได้ไหมว่าทำไมถึงเกิดขึ้นและสิ่งที่จำเป็นในการแก้ไข .. ฉันเดาว่ามันค่อนข้างตรงไปตรงมา?

<section id="results" style="margin-top: 1em;">
    <div class="accordion-group">
        <div class="accordion-heading">
        <table class="table table-striped table-hover accordion">
            <thead>
                <tr>
                    <th>Set Next</th>
                    <th>Name</th>
                    <th>Bench</th>
                    <th>Transacted</th>
                    <th>Receipe Name</th>
                </tr>
            </thead>

            <tbody data-bind="foreach: Stages">

                *****<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': '#' + RecipeName}">*****
                    <td data-bind="css: CellClass">
                        <button class="btn btn-warning" data-bind="attr: {'data-id': Id}" data-toggle="modal" data-target="#moveReason">@Html.LocalisedStringFor(model => model.MoveToStageText)</button>
                        <a class="text" data-bind="attr: {'data-id': Id}" data-toggle="modal" data-target="#moveReason"><span>@Html.LocalisedStringFor(model => model.CurrentPositionText)</span></a>
                    </td>
                    <td><span data-bind="text: ProcessName"></span></td>
                    <td><span data-bind="text: BenchName"></span></td>
                    <td><span data-bind="text: TransactionStatus"></span></td>
                    <td><span data-bind="text: RecipeName"></span></td>
                </tr>
                <tr id="" class="accordion-body collapse" data-bind="attr: {'id':RecipeName}">
                    <td colspan="5">
                        <div class="accordion-inner" data-bind="foreach: $parent.Stages">
                            <ul>
                                <li> <span data-bind="text: StepName"></span></li>
                                <button class="btn btn-warning" data-bind="attr: {'data-id': Id}" data-toggle="modal" data-target="#moveReason">@Html.LocalisedStringFor(model => model.MoveToStageText)</button>
                            </ul>

                        </div>

                    </td>
                </tr>
            </tbody>

        </table>
        </div>
        </div>
</section>

นี่คือผลลัพธ์ที่ได้กลับมา

ฉันสงสัยว่า <tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': '#' + RecipeName}">

จำเป็นต้องเป็น

<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': '#' + RecipeName()}">

อีกทางเลือกหนึ่งคือการใส่คุณสมบัติลงใน viewmodel ของคุณที่ทำตามตรรกะที่คุณต้องการ

function ViewModel(){
  var self = this;
  self.RecipeName = ko.observable();
  self.RecipeNameHash = ko.pureComputed(function(){
    return '#' + self.RecipeName();
  });
}

จากนั้นแถวของตารางจะกลายเป็น

<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': RecipeNameHash}">