我正在尝试将 Knockout.js 与 ASP.NET MVC 3.0 一起使用(标题放弃了,不是吗?!)
我遇到了一些问题(与新的 jQuery Tmpl 引擎比 ASP.NET MVC 3.0 更相关)。
我在测试中使用了 Steve Sanderson 的示例程序,并且大部分都使用新的 Razor 视图引擎复制了他的结果(我不相信 Razor 与我的问题有任何关系)。
http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/
但是,我想用自然的jquery 绑定做更多事情,而不是 HTML 绑定属性。这在淘汰赛的教程中有详细描述。 http://knockoutjs.com/documentation/template-binding.html
但是,正如它所解释的那样,我无法重现这一点。我将在下面显示我的查看代码。我的问题来自{{foreach (i, gift) gifts}}
不起作用的事实。我尝试了许多变体({{foreach (i, gift) gifts()}}
正如我在其他示例中看到的那样)。
我正在使用最新 knockout.js
的文件。我正在使用jQuery 1.4.3.
我正在使用http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js
的模板引擎。但是,我也尝试过使用tmpl.js
包含在 knockous.js 网站上的相同文件,并且得到相同的结果。
使用 jQuery 模板时,根据当前规范,模板不会呈现。
在这里可以找到 jQuery 模板标签文档:http: //api.jquery.com/category/plugins/templates/template-tags/
以防有人对我的确切模型感到困惑。如果我替换{{foreach (i, gift) gifts}}
为 { {foreach gift}}
,那么模型会呈现并正确运行,但我不能将 jQuery 本机${property}
声明用于任何内容。
HTML
@model IEnumerable<Knockout.GiftModel>
@using System.Web.Script.Serialization;
@{
View.Title = "Index";
Layout = "~/Views/Shared/_Site.cshtml";
}
<h2>Gift list editor</h2>
<form class="giftListEditor" action="/home/index" method="post" >
<table>
<tbody data-bind="template:'giftRowTemplate'"></tbody>
</table>
<button data-bind="click: addGift">Add Gift</button>
<button data-bind="enable: gifts().length > 0" type="submit">Submit</button>
</form>
<script type="text/html" id="giftRowTemplate">
{{each (i, gift) gifts}}
<tr>
<td>Gift name: <input class="required" data-bind="value: Title, uniqueName: true" /> ${Title} </td>
<td>Price: $ <input class="required number" data-bind="value: Price, uniqueName: true"/></td>
<td><a href="#" data-bind="click: function() { viewModel.removeGift( $value ) }">Delete</a></td>
</tr>
{{/each}}
</script>
<script type="text/javascript">
var initialData = @(new HtmlString(Model.ToJson()));
var viewModel = {
gifts: ko.observableArray(initialData),
addGift: function () {
this.gifts.push({ Title: "", Price: "" });
},
removeGift: function (gift) {
this.gifts.remove(gift);
},
save: function () {
ko.utils.postJson(location.href, { gifts: this.gifts });
}
};
ko.applyBindings(viewModel);
$("form").validate({ submitHandler: function() { viewModel.save() } });
</script>