最新の jQuery ファイルおよび ASP.NET MVC で Knockout.js を使用する

Question

ASP.NET MVC 3.0 で Knockout.js を使用しようとしています (タイトルでわかりませんでした?!)

http://knockout.js.com

いくつかの問題が発生しています (ASP.NET MVC 3.0 よりも新しい jQuery Tmpl エンジンに関連しています)。

私はテストで Steve Sanderson のサンプル プログラムを使用しています。 たいてい 新しい Razor View Engine を使用して結果を再現しました (Razor が私の問題と何の関係もないと思います)。

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

しかし、私はもっとやりたいと思っています 自然 HTML バインディング属性の代わりに jquery バインディングを使用します。これについては、Knockout のチュートリアルで詳しく説明されています。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 の Web サイトに含まれているファイルを実行したところ、同じ結果が得られました。

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>

Answer 1

私ならこれとは別のアプローチをします。次の行を使用します。

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

の代わりに：

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

そうすれば、 {{each (i, gift) gifts}} 問題を引き起こしているテンプレート内の行。

Answer 2

{{each gifts}} の代わりに {{each (i, gift) gifts}} トリックを実行します。