如何在 ASP.NET MVC 视图模型中使用淘汰.js？
赏金
已经有一段时间了，我还有一些未解决的问题。我希望通过增加赏金也许这些问题会得到答案。
- 如何在淘汰.js 中使用 html 助手
为什么需要文档来使其工作(更多信息请参见第一次编辑)
如果我在视图模型中使用淘汰映射，我该如何做类似的事情呢？因为我没有一个函数，由于映射。
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 };I want to use plugins for instance I want to be able to rollback observables as if a user cancels a request I want to be able to go back to the last value. From my research this seems to be achieved by people making plugins like editables
How do I use something like that if I am using mapping? I really don’t want to go to a method where I have in my view manual mapping were I map each MVC viewMode field to a KO model field as I want as little inline javascript as possible and that just seems like double the work and that’s why I like that mapping.
I am concerned that to make this work easy (by using mapping) I will lose a lot of KO power but on the other hand I am concerned that manual mapping will just be a lot of work and will make my views contain too much information and might become in the future harder to maintain(say if I remove a property in the MVC model I have to move it also in the KO viewmodel)
Original Post
I am using asp.net mvc 3 and I looking into knockout as it looks pretty cool but I am having a hard time figuring out how it works with asp.net mvc especially view models.
For me right now I do something like this
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 模型也可能包含其他视图模型。
然后，如果我要使用 html 帮助器来帮助我向用户显示它，我将把这个 Vm 传递给 View。
@Html.TextBoxFor(x => x.CourseName)
我可能有一些 foreach 循环或其他东西来从 Student View 模型集合中获取数据。
然后，当我提交表单时，我将使用 jquery 和 serialize array，并将其发送给一个控制器操作方法，该方法将其绑定回视图模型。
对于敲出.js，它是完全不同的，因为你现在已经有了它的视图模型，而且从我看到的所有示例来看，它们不使用 html 助手。
你是如何使用 MVC 的这两个特性的？
我找到了 这个视频，它简要地(视频的最后几分钟@18:48)介绍了一种使用视图模型的方法，基本上是使用一个内联脚本，其中包含了在 ViewModel 中分配值的淘汰.js 视图模型。
这是唯一的办法吗？在我的示例中有一个视图模型集合怎么样？我是否需要一个 foreach 循环或者其他什么东西来提取出所有的值并将其分配到淘汰中？
至于 html 助手的视频没有说什么关于他们。
这两个方面让我非常困惑，因为似乎没有多少人谈论它，它让我感到困惑的是初始值和所有东西是如何进入视图的，而任何示例都只是一些硬编码的值示例。
剪辑
我正在尝试 Darin Dimitrov 所建议的方法，这个方法似乎有效(不过我不得不对他的代码做一些修改)。不知道为什么我必须使用准备好的文档，但不知何故，一切都没有准备好。
@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
所以我有一个起点，我想至少将更新当我做了一些更多的游戏，以及如何工作。
我试图通过交互式教程，但使用视图模型代替。
还不知道如何处理这些部分
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);
}
最佳答案