带有 Knockout.js 的文之心引导表答案

【问题标题】：Wenzhixin bootstrap-table with Knockout.js带有 Knockout.js 的文之心引导表
【发布时间】：2016-03-22 23:50:52
【问题描述】：

我们正在尝试将点击事件数据绑定到引导表，但无法使其正常工作。我们已经尝试绑定到按钮、href、tr 和 td，但它不会触发。

我们可以通过淘汰赛成功地用我们数据库中的数据填充表格。

        <tbody>
        <!-- ko foreach: listOfCustomers-->
        <tr class="clickable-row">
            <td> <span class="glyphicon glyphicon-move"></span></td>
            <td class="text"><button type="button" class="bananen" onclick="App.CustomersScreen.onAfterRenderFunc();"></button></td>
            <td class="text">{{ name }}</td>
            <td class="text">{{ town }}</td>
            <td class="text">{{ mail }}</td>
            <td class="text">{{ phone }}</td>
            <td class="text">Motor</td>
            <td class="text"><span class="glyphicon glyphicon-exclamation-sign"></span></td>
            <td data-visible="false"
                data-switchable="false" class="hidden">{{ id }}</td>
        </tr>
        <!-- /ko -->
        </tbody>

希望你能理解问题

提前致谢。

【问题讨论】：

看起来您正在使用 Handlebars 模板，您有一个 onclick，并且 Bootstrap 可能也在操作 DOM。你能举一个简单的例子，我们可以作为 fiddle 或 sn-p 运行吗？

标签： knockout.js data-binding bootstrap-table

【解决方案1】：

在我看来，您使用了错误的数据绑定语法。

Knockout 使用 data-bind 属性，而您的示例 HTML 看起来好像需要一个 JavaScript 模板引擎，如把手。

现在，Knockout 允许您将其渲染/模板引擎替换为您喜欢的任何内容，因此可以使用车把等引擎，但正如您在问题中没有说的那样，我猜您 还没有换掉 Knockout 的模板引擎。

如果我是对的，那么您的 HTML 应该是这样的：

<tbody>
    <!-- ko foreach: listOfCustomers-->
        <tr class="clickable-row">
            <td> <span class="glyphicon glyphicon-move"></span></td>
            <td class="text"><button type="button" class="bananen" onclick="App.CustomersScreen.onAfterRenderFunc();"></button></td>
            <td class="text" data-bind="text: name"></td>
            <td class="text" data-bind="text: town"></td>
            <td class="text" data-bind="text: mail"></td>
            <td class="text" data-bind="text: phone"></td>
            <td class="text">Motor</td>
            <td class="text"><span class="glyphicon glyphicon-exclamation-sign"></span></td>
            <td data-visible="false"
        data-switchable="false" class="hidden" data-bind="text: id"></td>
        </tr>
    <!-- /ko -->
</tbody>

【讨论】：