使用Knockout JS显示Modal（灯箱）以显示项目

Question

我正在制作演示，我有两个列表。

• 电话
• 最喜欢的配饰

电话列表显示电话名称及其附件，另一个列表仅显示最喜欢的配件。

电话列表中有一个“编辑”按钮。

我想在“编辑”按钮中添加一个模态对话框（或灯箱），它会显示所有喜爱的配件。

灯箱内应该有一个“保存”按钮，可以根据产品保存最喜欢的配件。

请在JSFiddle查看我的演示

HTML

<table>

    <tr class="tableHeaderRow">

        <th>

            <span style="text-align: center; cursor: pointer; width: 150px; margin-right: 60px; float: left; margin-left: -35px;">Product 
            </span>


        </th>
        <th>Assesories

        </th>

        <th class="editCol">
        Edit 


    </tr>


    <!-- ko foreach: MobilePhone -->
    <tr class="tableRow">



        <td class="licenseKeyCol" data-bind="text: product"></td>
        <td data-bind="foreach: Accesories">
            <div>
                <span data-bind="text: $data"></span>
            </div>
        </td>

        <td class="editCol">
            <a href="#" class="editButton">Edit
            </a>
        </td>
    </tr>

    <!-- /ko -->

</table>
<br />
<b>Favorite Accessories</b>
<table>

    <tr class="tableHeaderRow">


        <th>Assesories

        </th>


    </tr>


    <!-- ko foreach: FavoriteAccesories -->
    <tr class="tableRow">
        <td data-bind="text: FavAccesories"></td>

    </tr>
    <!-- /ko -->

</table>

淘汰JS

function PhoneViewModel( )
                {
                                var self = this;

                                self.MobilePhone = ko.observableArray([
                                                { product : 'HTC', Accesories: ['Car Charger', 'Bluetooth']},
                                                { product : 'iPhone 5',  Accesories: ['Battery'] },
                                                { product : 'Galaxy S4', Accesories: ['Wall Adaptor']},
                                                { product : 'Motorolla', Accesories: ['USB Cable', 'Earphone', 'AUX Cable']},
                                                { product : 'Nokia Lumia', Accesories: ['Mobile Cover']},
                                                { product : 'LG', Accesories: ['Earphone']}
                                            ]);

                                 self.FavoriteAccesories = ko.observableArray([
                                        { FavAccesories: 'Screen Cover', id: 1},
                                        { FavAccesories: 'Earphone', id: 2},
                                        { FavAccesories: 'Wall Charger' ,id:3}                                      
                                    ]); 

                };




                $(document).ready( function()
                {      

                    ko.applyBindings( new PhoneViewModel() );




                });  

在JSFiddle查看我的演示

请告诉我们如何在单击“编辑”按钮的模态对话框中显示所有收藏的附件。

谢谢。

西特