如何在 Html.EditorFor() 等 Mvc 助手中使用 Knockout 的数据绑定属性答案

【问题标题】：How to use Knockout's data-bind attribute in Mvc helpers like Html.EditorFor()如何在 Html.EditorFor() 等 Mvc 助手中使用 Knockout 的数据绑定属性
【发布时间】：2013-05-19 05:09:01
【问题描述】：

我试过这个 @Html.EditorFor(model => model.Name, " ", new { data_bind = "value:firstName" }); 和其他可能的重载，但它们似乎都不起作用。

其余代码：

<script type="text/javascript">
$(document).ready(function () {

    function AppViewModel() {
        this.firstName = ko.observable("");
        this.lastName = ko.observable("");
    }
    ko.applyBindings(new AppViewModel());
});

【问题讨论】：

我建议只使用通用 html 而不要使用 @html.Editor 助手。如果您需要模型中的数据，请使用它来构建您的 AppViewModel
您的编辑器创建的 html 输出是什么？它会创建一个文本框或标签吗？是否缺少您指定的 data-bind 属性？

标签： javascript asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案1】：

EditorFor 的第三个参数没有执行您认为应该执行的操作。

见http://msdn.microsoft.com/en-us/library/ff406461(v=vs.98).aspx

EditorFor 无法向元素添加 HTML 属性。请改用TextBoxFor：

@Html.TextBoxFor(model => model.Name, new { data_bind = "value:firstName" });

【讨论】：

对于 .Net Framework 4.6.1 及更高版本，我可以确认 @Html.EditorFor(m => m.FirstName, new { htmlAttributes = new { @class = "form-control", data_bind = "value: firstName", maxlength = 50 } }); 有效。 data_bind 仍然是关键！

【解决方案2】：

我知道我在这方面有点晚了，但这是我一直在使用的解决方案。

将字段名称（在本例中为 name）作为 additionalViewData 的一部分传递给编辑器模板，如下所示：

@Html.EditorFor(t => t.name, "", new { fieldName = "name" })

然后在你的editorTemplate 中你可以有这个：

@{
    var fieldName = ViewData.Where(v => v.Key == "fieldName").FirstOrDefault().Value;
}
@Html.TextBox("", Model, new { data_bind = "value:"+fieldName })

希望这对某人有所帮助。

【讨论】：

确保使用properly format code 的标记。它极大地提高了可读性。