ASP.NET MVC 3.0 で Knockout.js を使用しようとしています (タイトルはそれを与えましたよね?!)
いくつかの問題が発生しています (ASP.NET MVC 3.0 よりも新しい jQuery Tmpl Engine に関連しています)。
私はテストで Steve Sanderson のサンプル プログラムを使用しており、新しい Razor View Engine で彼の結果をほぼ再現しました (Razor が私の問題と関係があるとは思いません)。
http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/
ただし、HTML バインディング属性ではなく、自然なjquery バインディングをもっと使いたいと思っています。これについては、ノックアウトのチュートリアルで詳しく説明されています。 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.jsnockous.js の Web サイトに含まれている同じファイルを使用してこれを試してみたところ、同じ結果が得られました。
jQuery テンプレートを使用する場合、現在の仕様では、テンプレートはレンダリングされません。
jQuery テンプレート タグのドキュメントは、http: //api.jquery.com/category/plugins/templates/template-tags/にあります。
私の正確なモデルについて誰かが混乱した場合に備えて。{{foreach (i, gift) gifts}}{に置き換えると、モデルは正しくレンダリングされ、正しく動作しますが、jQuery ネイティブ宣言は何にも{foreach gift}}使用できません。${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>