赏金
已经有一段时间了,我还有几个悬而未决的问题。我希望通过增加赏金也许这些问题会得到解答。
- 你如何使用带有 knockout.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 };
我想使用插件,例如我希望能够回滚可观察对象,就好像用户取消了我希望能够返回到最后一个值的请求一样。根据我的研究,这似乎是通过制作可编辑插件等插件来实现的
如果我使用映射,我该如何使用类似的东西?我真的不想使用在我的视图中手动映射的方法,即我将每个 MVC viewMode 字段映射到一个 KO 模型字段,因为我想要尽可能少的内联 javascript,这似乎是工作的两倍,那就是为什么我喜欢那个映射。
我担心为了使这项工作变得容易(通过使用映射)我会失去很多 KO 权力,但另一方面我担心手动映射只会做很多工作并且会使我的视图包含太多信息和将来可能会变得更难维护(例如,如果我在 MVC 模型中删除一个属性,我也必须在 KO 视图模型中移动它)
原帖
我正在使用 asp.net mvc 3,我正在研究淘汰赛,因为它看起来很酷,但我很难弄清楚它如何与 asp.net mvc 一起工作,尤其是视图模型。
对我来说,我现在做这样的事情
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; }
}
我将拥有一个具有一些基本属性(如 CourseName)的 Vm,并且在它之上会有一些简单的验证。如果需要,Vm 模型中也可能包含其他视图模型。
然后,如果我会使用 html 助手帮助我将它显示给用户,我会将这个 Vm 传递给视图。
@Html.TextBoxFor(x => x.CourseName)
我可能有一些 foreach 循环或其他东西来从学生视图模型的集合中获取数据。
然后,当我提交表单时,我会使用 jquery 并将serialize array
其发送到控制器操作方法,该方法会将其绑定回视图模型。
使用 knockout.js,一切都不同了,因为您现在获得了它的视图模型,并且从我看到的所有示例中它们不使用 html 帮助器。
你如何将 MVC 的这两个特性与 knockout.js 一起使用?
我找到了这个视频,它简要地(视频的最后几分钟 @ 18:48)通过基本上拥有一个内联脚本来使用视图模型,该脚本具有被分配 ViewModel 中的值的 knockout.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
所以我有一个起点,我想至少会在我做更多的游戏以及它是如何工作的时候更新。
我正在尝试阅读交互式教程,但改用 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);
}