将 Knockout.js 与最新的 jQuery 文件和 ASP.NET MVC 一起使用

Posted 2023-02-24

【中文标题】将 Knockout.js 与最新的 jQuery 文件和 ASP.NET MVC 一起使用

【英文标题】：Using Knockout.js with newest jQuery Files and ASP.NET MVC

【发布时间】：2011-04-30 20:46:56

【问题描述】：

我正在尝试将 Knockout.js 与 ASP.NET MVC 3.0 一起使用（标题已经放弃了，不是吗？！）

http://knockout.js.com

我遇到了一些问题（与新的 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/

但是我想用 natural 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 作为模板引擎。但是，我也尝试过使用包含在 knockous.js 网站上的相同 tmpl.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>

【参考方案1】：

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

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

代替：

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

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

【讨论】：

谢谢，我想我只是有一些拼写错误，与您的解释不符。这非常有效。

【参考方案2】：

each gifts 代替 each (i, gift) gifts 可以解决问题。