Question

当我点击链接时效果很好，当我使用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），不属于View Model。

Answer 1

使用click绑定时，您绑定到单击时要调用的函数。但是，您没有提供调用绑定的函数，而是实际调用函数。您需要将其包装到单击时要调用的函数中。

你需要做这样的事情：

<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>

Answer 2

上述问题在于您将代码放在视图中。

在某些情况下，效果很好。但是，当您让设计人员使用您的代码并可能重新排序等等时，视图中的函数可能会丢失。

建议采用类似的方法：

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

在viewModel

中

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

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

淘汰数据绑定

2 个答案: