Knockout.js 敲除数据绑定

当我点击链接时效果很好，当我使用showModal点击事件时，我会在页面加载时得到三个打开的模态（列表中的三个项目），当我点击一个按钮时，我会得到三个模态。我想使用模式，因为列表位于另一个页面视图中。我想我只是需要一些关于数据绑定到事件模型的帮助

<div class='liveExample'>
        <table >
            <tr data-bind="foreach: items">
                <td data-bind="text:ID"></td>
                <td data-bind="text:Title"></td>
                <td data-bind="text:Body"></td>
                <td data-bind="text:Expires"></td>
               <!-- <td> <button data-bind="click: showModal(Title, Url )">Edit</button> </td>-->
                <td><a data-bind="attr: { href: Url }">Edit</a></td>
            </tr>

        </table>

    </div>

---

ShowModal是一个标准JavaScript函数（SharePoint），不是视图模型的一部分。

使用

单击

绑定时，您将绑定到单击时要调用的函数。但是，您并没有提供要在绑定中调用的函数，而是实际调用该函数。您需要将其包装到一个函数中，以便在单击时调用

您需要这样做：

<div class='liveExample'>
    <table >
        <tr data-bind="foreach: items">
            <td data-bind="text:ID"></td>
            <td data-bind="text:Title"></td>
            <td data-bind="text:Body"></td>
            <td data-bind="text:Expires"></td>
            <td>
                <button data-bind="click: function () { showModal(Title, Url ); }">Edit</button>
            </td>
            <td>
                <a data-bind="attr: { href: Url }">Edit</a>
            </td>
        </tr>
    </table>
</div>

编辑

上面的问题是您将代码放在视图中

在某些情况下，这很有效。但是，当设计师使用代码并可能重新排序时，视图中的函数可能会丢失

建议采用类似的方法：

<td data-bind="text:Expires"></td>
<td>
    <button data-bind="click: showModalEvent">Edit</button>
</td>

---

然后，您可以更轻松地对代码运行静态分析等，以捕获更改、错误等，并保持视图的简洁性。

谢谢！这正是我所需要的！

showModalEvent : function(data, e) {
    showModal(data.Title, data.Url);
}