悬赏
已经有一段时间了，我仍然有几个未解决的问题。我希望通过添加悬赏来解答这些问题。
- 如何在knockout.js中使用html helpers
为什么需要document ready才能使它工作（有关更多信息，请参见第一次编辑）
如果我正在使用knockout映射与我的视图模型，我该如何做类似于这样的事情？因为映射中没有函数。
我希望使用插件，例如，如果用户取消请求，我想能够回滚 observables 并返回最后一个值。经过我的研究，人们通过制作插件（如editables）来实现这一点。
如果我正在使用 mapping，我该如何使用类似的东西？我真的不想采用手动映射的方法，在我的视图中映射每个 MVC viewMode 字段到 KO 模型字段，因为我希望内联 JavaScript 尽可能少，这似乎是双倍的工作，这就是我喜欢 mapping 的原因。
我担心为了让这个工作变得容易（通过使用 mapping），我会失去很多 KO 的功能，但另一方面，我也担心手动映射会让我的视图包含太多信息，并且将来可能变得更难维护（例如，如果我从 MVC 模型中删除一个属性，我也必须在 KO 视图模型中移除它）。
function AppViewModel() {
// ... leave firstName, lastName, and fullName unchanged here ...
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
public class CourseVM
{
public int CourseId { get; set; }
[Required(ErrorMessage = "Course name is required")]
[StringLength(40, ErrorMessage = "Course name cannot be this long.")]
public string CourseName{ get; set; }
public List<StudentVm> StudentViewModels { get; set; }
}
我会创建一个Vm，其中包括一些基本属性，如CourseName，并在其上设置一些简单的验证。如果需要，Vm模型中也可能包含其他视图模型。
然后，我会将此Vm传递给View，在那里我会使用html helpers来帮助我向用户显示它。
@Html.TextBoxFor(x => x.CourseName)
我可能需要使用一些 foreach 循环之类的东西来从 Student View Models 集合中获取数据。
然后，当我提交表单时，我会使用jquery和 serialize array 将其发送到一个控制器操作方法，该方法将其绑定回视图模型。
使用 knockout.js 完全不同，因为现在你有了它的 viewmodels，而且从我看到的所有示例中，它们都不使用html helpers。
如何在 MVC 中使用这 2 个功能与 knockout.js？
我发现了这个视频，它简要地（视频的最后几分钟 @ 18:48）介绍了一种使用viewmodels的方法，基本上是在具有 knockout.js viewmodel 的内联脚本中分配获取 ViewModel 的值。
这是唯一的方法吗？ 在我的例子中，如果有一个包含 viewmodels 集合的对象怎么做？ 我必须使用 foreach 循环或其他方式提取所有值并将其分配给 knockout 吗？
至于 html helpers，视频中没有提到。
这些是令我困惑不解的 2 个领域，因为很少有人谈论它，而每个示例仅仅是一些硬编码值的示例，让我困惑不解。
编辑
我正在尝试 Darin Dimitrov 建议的方法，这似乎有效（我不过必须对他的代码进行一些更改）。 不知道为什么必须使用 document ready，但某种程度上没有它，所有东西都还没有准备好。
@model MvcApplication1.Models.Test
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var model = @Html.Raw(Json.Encode(Model));
// Activates knockout.js
ko.applyBindings(model);
});
</script>
</head>
<body>
<div>
<p>First name: <strong data-bind="text: FirstName"></strong></p>
<p>Last name: <strong data-bind="text: LastName"></strong></p>
@Model.FirstName , @Model.LastName
</div>
</body>
</html>
我必须将它包装在jQuery文档准备好的函数中才能使其工作。
我也收到了这个警告。不确定它是关于什么的。
Warning 1 Conditional compilation is turned off -> @Html.Raw
我想我至少有了一个起点，当我再做一些尝试并弄清楚这是如何工作的时候，我会更新的。
我正在尝试通过使用ViewModel来完成交互式教程。
还不确定如何处理这些部分。
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}
function AppViewModel() {
// ... leave firstName, lastName, and fullName unchanged here ...
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
编辑2
我已经解决了第一个问题，但对于第二个问题一无所知。有人有任何想法吗？
@model MvcApplication1.Models.Test
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var model = @Html.Raw(Json.Encode(Model));
var viewModel = ko.mapping.fromJS(model);
ko.applyBindings(viewModel);
});
</script>
</head>
<body>
<div>
@*grab values from the view model directly*@
<p>First name: <strong data-bind="text: FirstName"></strong></p>
<p>Last name: <strong data-bind="text: LastName"></strong></p>
@*grab values from my second view model that I made*@
<p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
<p>Another <strong data-bind="text: Test2.Another"></strong></p>
@*allow changes to all the values that should be then sync the above values.*@
<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
<p>Another <input data-bind="value: Test2.Another" /></p>
@* seeing if I can do it with p tags and see if they all update.*@
<p data-bind="foreach: Test3">
<strong data-bind="text: Test3Value"></strong>
</p>
@*took my 3rd view model that is in a collection and output all values as a textbox*@
<table>
<thead><tr>
<th>Test3</th>
</tr></thead>
<tbody data-bind="foreach: Test3">
<tr>
<td>
<strong data-bind="text: Test3Value"></strong>
<input type="text" data-bind="value: Test3Value"/>
</td>
</tr>
</tbody>
</table>
控制器
public ActionResult Index()
{
Test2 test2 = new Test2
{
Another = "test",
SomeOtherValue = "test2"
};
Test vm = new Test
{
FirstName = "Bob",
LastName = "N/A",
Test2 = test2,
};
for (int i = 0; i < 10; i++)
{
Test3 test3 = new Test3
{
Test3Value = i.ToString()
};
vm.Test3.Add(test3);
}
return View(vm);
}
