gpt4 book ai didi

jquery - 将 Knockout.js 与最新的 jQuery 文件和 ASP.NET MVC 结合使用

转载 作者:行者123 更新时间:2023-12-03 22:15:16 26 4
gpt4 key购买 nike

我正在尝试将 Knockout.js 与 ASP.NET MVC 3.0 一起使用(标题已经泄露了它,不是吗?!)

http://knockout.js.com

我遇到了一些问题(与新的 jQuery Tmpl 引擎比 ASP.NET MVC 3.0 更相关)。

我在测试中使用 Steve Sanderson 的示例程序,并且大部分使用新的 Razor View Engine 复制了他的结果(我不相信 Razor 与我的问题有任何关系)。

http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

但是,我想使用 natural jquery 绑定(bind)而不是 HTML 绑定(bind)属性做更多事情。这在 knockout 的教程中有详细描述。 http://knockoutjs.com/documentation/template-binding.html

但是我无法按照它的解释来重现它。我将在下面显示我的查看代码。我的问题来自于 {{foreach (i,gif)gifts}} 不起作用的事实。我尝试了很多变体( {{foreach (i,gif)gift()}} 正如我在其他示例中看到的那样)。

我正在使用最新 knockout.js 文件。我正在使用 jQuery 1.4.3。 我正在使用 http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js 进行模板化引擎。不过,我也使用 Knockous.js 网站上包含的相同 tmpl.js 文件进行了尝试,并且得到了相同的结果。

When using jQuery Templating, Per the current specification, the template does not render.

jQuery 模板标签文档可以在这里找到:http://api.jquery.com/category/plugins/templates/template-tags/

以防有人对我的确切型号感到困惑。如果我将 {{foreach (i,gif)gifts}} 替换为 {{foreachgift}},则模型会正确渲染和运行,但我无法使用 jQuery任何内容的 native ${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>

最佳答案

我会以不同的方式处理这个问题。我会使用以下行:

<tbody data-bind='template: { name: "giftRowTemplate", foreach: gifts }'></tbody>

而不是:

<tbody data-bind="template:'giftRowTemplate'"></tbody>

这样您就不需要在模板中使用给您带来麻烦的 {{each (i,gif)gifts}} 行。

关于jquery - 将 Knockout.js 与最新的 jQuery 文件和 ASP.NET MVC 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4025884/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com