باستخدام straint.js مع أحدث ملفات jQuery و ASP.NET MVC
-
26-09-2019 - |
سؤال
أحاول استخدام knockout.js مع ASP.NET MVC 3.0 (العنوان أعطاه بعيدًا ، أليس كذلك؟!)
أنا أواجه بعض المشكلات (أكثر مرتبطة بمحرك TMPL الجديد من ASP.NET MVC 3.0).
أنا أستخدم برنامج مثال ستيف ساندرسون في اختباري ، ولدي خاصة قام بتكرار نتائجه مع محرك Razor View الجديد (لا أعتقد أن 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
لمحرك templating. ومع ذلك ، لقد جربت هذا أيضًا باستخدام نفس الشيء tmpl.js
الملف المدرج على موقع knockous.js ، وأحصل على نفس النتائج.
عند استخدام templating jQuery ، وفقًا للمواصفات الحالية ، لا يقدم القالب.
تم العثور على وثائق علامات قالب jQuery هنا: http://api.jquery.com/category/plugins/templates/template-tags/
في حالة الخلط بين أي شخص بشأن النموذج الخاص بي. إذا استبدلت {{foreach (i, gift) gifts}}
مع {{foreach gift}}
, ثم يقدم النموذج ويتصرف بشكل صحيح ، لكن لا يمكنني استخدام مواطن jQuery ${property}
إعلانات عن أي شيء.
لغة البرمجة
@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, gift) gifts}}
خط في القالب الذي يمنحك المتاعب.
نصائح أخرى
{{each gifts}}
بدلاً من {{each (i, gift) gifts}}
سوف تفعل الحيلة.