Question

我想知道是否可以在 Razor 语法中使用 Knockout data-bind。

我的观点中有这个代码：

<tbody data-bind="foreach: relays">
    <tr>
        <td id="body-button-column">
            <button class="btn btn-default btn-sm" title="Remove relay" data-bind="click: $parent.removeRelay">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </button>
        </td>
        <td><input type="text" data-bind="value: $index"/></td>
        <td>@Html.DropDownList("RelayConfigurations[" + $index + "].Address", Model.Addresses, "Select an Item")</td>
    </tr>
</tbody>

我的viewmodel具有以下属性

self.relays = ko.observableArray(@Html.Raw(Json.Encode(Model.RelayConfigurations)));

其中RelayConfigurations是模型上的集合对象。

在使用Razor语法@Html.DropDownList的行中....我想对$ index值使用knockout绑定，但我不知道如何做到这一点。或者如果可能的话。

如果我用硬编码值零替换该行中的$index，则控制器操作中的模型绑定按预期在回发上工作（尽管只有第一个中继由于硬编码值为零，该集合具有任何数据。

Answer 1

当然你可以在剃刀中使用淘汰赛：）

我相信你要找的是这个匿名对象方法：

@Html.DropDownList("somelist", Model.List, new { id = "listbox", data_bind = "" })

Answer 2

我理解的问题

将html格式化为在提交表单时很容易被接受为服务器端模型的格式。
从客户端向dropdownList添加项目的功能。

第一个问题的解决方案是查看DropdownList的呈现HTML并复制生成的<select>标记，然后将knockoutjs应用于该标记，这样您将保持与服务器相同的格式希望能够在利用knockoutjs的同时将提交的表单转回服务器端模型

所以你最终会得到像这样的东西

<tbody data-bind="foreach: relays">
    <tr>
        <td id="body-button-column">
            <button class="btn btn-default btn-sm" title="Remove relay" data-bind="click: $parent.removeRelay">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </button>
        </td>
        <td><input type="text" data-bind="value: $index"/></td>
        <td>
           <select data-bind="attr: {id : 'RelayConfigurations[' + $index + '].Address' }, options: relays ,optionsCaption:'Select an Item'"></select>
        </td>
    </tr>
</tbody>

至于第二个问题，您已将数据发送到data-bind，因此您可以根据需要添加和删除项目。

来自@meyousikmann的评论

只需快速更正其他任何人的语法：

<select data-bind="attr: {name: 'RelayConfigurations[' + $index() + '].Address'}, options: $parent.addresses, optionsCaption: 'Select an Item'"></select>

使用带有剃刀语法的knockout绑定

2 个答案: