在 table 中为按钮添加 bootstrap 使用 Handlebars 管理的弹出框

Question

我自定义了一个在 table 中使用的弹出窗口，问题在于是否将 div 放入其中，我将向其中注入带把手的已填充弹出窗口的标记。我必须找到一个解决方案来合并车把的一部分。或者可以用另一种方式呈现车把？还有另一种方法可以在 table?

中使用弹出窗口插入 div

<script id="handlePopoverDesk" type="text/x-handlebars-template">
    <div id="list-popover" class="hide">
        <div class="closePopover">X</div>
        <ul class="nav nav-pills nav-stacked">
            {{#each deskType}}
            <li data-id="{{id}}" data-select="false" data-type="media" style="cursor:pointer;margin:2px 0 2px 0;"><a>{{type}}</a></li>
            {{/each}}
        </ul>
        <br />
        <button style="display: block; margin: 0 auto;" class="btn btn-primary btn-sm" data-target="#modal-addNewCategoryDesk" data-toggle="modal"><i class="fas fa-plus-square"></i>&nbsp Aggiungi</button>
    </div>
</script>

 var sourceDeskMedia = $("#handlePopoverDesk").html();
        var templateDeskMedia = Handlebars.compile(sourceDeskMedia);

<tr data-id="{{id}}" data-category="0">
        @*<td> <input type="checkbox" class="select-element"></td>*@
        <td class="responsivePressCoverageTable col-md-2 col-sm-2 col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>
        <td class="responsivePressCoverageTable col-md-8 col-sm-8 col-xs-8">
            <a style="text-decoration:none;font-weight: bold;" href="{{linkMedia}}" target="_blank">{{media}}</a><br />
            <a class="coverage-purchase" style="text-decoration:none;cursor:pointer;" data-target="#modal-purchase" data-toggle="modal" dataId="{{id}}">{{article}}</a><br />
            <a style="text-decoration:none;  font-style: italic;" href="{{linkJournalist}}" target="_blank">{{journalist}}</a>
        </td>
        <td class="col-md-1 col-sm-1 col-xs-1">{{#checkPurchase purchase}}{{/checkPurchase}}</td>
        @if (isProfessional)
        {
            <text>
                <td class="col-md-1 col-sm-1 col-xs-1"><button data-toggle="popoverFavorite" title="Salva in:" data-popover-content="#list-popover" data-placement="left" data-id="{{id}}" data-fav="{{savefavoriteElements}}" class="btn btn-warning btn-xs iPressShare">Salva &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
               
                <div class="setDeskPressCoveragePaper row margin-10" data-id="{{id}}"></div>
            </text>

        }
        else
        {
            <text>
                <td></td>
            </text>
        }
    </tr>

Answer 1

我这样做解决了：

 @if (isProfessional)
        {
            <text>
                <td class="col-md-1 col-sm-1 col-xs-1"><button data-toggle="popoverFavorite" title="Salva in:" data-popover-content="#list-popover" data-placement="left" data-id="{{id}}" data-fav="{{savefavoriteElements}}" class="btn btn-warning btn-xs iPressShare">Salva &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button>
                   <div class="setDeskPressCoveragePaper row margin-10" data-id="{{id}}"></div>        
                </td>               
            </text>
        }
        else
        {
            <text>
                <td></td>
            </text>
        }

我在TD

里面插入了DIV

在 table 中为按钮添加 bootstrap 使用 Handlebars 管理的弹出框

Add bootstrap popover manage with Handlebars for a button inside a table

html-table

handlebars.js

popover