Ödül
Uzun zaman oldu ve hala birkaç önemli sorum var. Umarım bir ödül ekleyerek belki bu sorular cevaplanır.
- Knockout.js ile html yardımcılarını nasıl kullanıyorsunuz?
Çalışması için belge neden hazırdı (daha fazla bilgi için ilk düzenlemeye bakın)
Görünüm modellerimle altını gizleme eşlemesini kullanıyorsam böyle bir şeyi nasıl yapabilirim? Haritalama nedeniyle bir fonksiyonum olmadığı için.
function AppViewModel() { // ... leave firstName, lastName, and fullName unchanged here ... this.capitalizeLastName = function() { var currentVal = this.lastName(); // Read the current value this.lastName(currentVal.toUpperCase()); // Write back a modified value };Eklentileri kullanmak istiyorum, örneğin, bir kullanıcı bir isteği iptal etmiş gibi, gözlemlenebilirleri geri alabilmek istiyorum, son değere geri dönebilmek istiyorum. Araştırmamdan, bu, düzenlenebilir gibi eklentiler yapan kişiler tarafından başarılmış gibi görünüyor.
Haritalama kullanıyorsam böyle bir şeyi nasıl kullanırım? Benim görüşümde el ile eşleştirmeye sahip olduğum bir yönteme gerçekten gitmek istemiyorum, her bir MVC viewMode alanını mümkün olduğunca az satır içi javascript istediğim kadar bir KO model alanına eşledim ve bu işin iki katı gibi görünüyor ve bu bu haritayı neden seviyorum.
Bu işi kolaylaştırmak için (haritalama kullanarak) çok fazla KO gücü kaybedeceğimden endişeliyim, ancak diğer yandan manuel haritalamanın çok fazla iş olacağı ve görüşlerimin çok fazla bilgi içermesine neden olacağından endişeliyim ve gelecekte bakımı daha zor hale gelebilir (örneğin, MVC modelindeki bir mülkü kaldırırsam, onu KO görünüm modelinde de taşımam gerekir)
Orijinal Gönderi
Ben asp.net mvc 3 kullanıyorum ve oldukça havalı göründüğü için nakavt araştırıyorum ama asp.net mvc ile nasıl çalıştığını anlamakta zorlanıyorum, özellikle de modelleri görüntüle.
Şu anda benim için böyle bir şey yapıyorum
public class CourseVM
{
public int CourseId { get; set; }
[Required(ErrorMessage = "Course name is required")]
[StringLength(40, ErrorMessage = "Course name cannot be this long.")]
public string CourseName{ get; set; }
public List<StudentVm> StudentViewModels { get; set; }
}CourseName gibi bazı temel özelliklere sahip bir VM'ye sahip olacaktım ve üzerinde bazı basit doğrulamalar olacak. Vm modeli, gerekirse başka görünüm modellerini de içerebilir.
Daha sonra, kullanıcıya göstermeme yardımcı olması için html yardımcıları kullansaydım, bu Vm'yi Görünüme geçirirdim.
@Html.TextBoxFor(x => x.CourseName)Verileri Öğrenci Görünüm Modelleri koleksiyonundan almak için bazı foreach döngülerim veya başka bir şeyim olabilir.
Daha sonra formu gönderdiğimde jquery kullanacak serialize arrayve onu viewmodel'e geri bağlayacak bir controller eylem yöntemine gönderecektim.
Knockout.js ile, artık bunun için görüntüleme modellerine sahip olduğunuz ve gördüğüm tüm örneklerden html yardımcıları kullanmadıkları için her şey farklı.
MVC'nin bu 2 özelliğini knockout.js ile nasıl kullanıyorsunuz?
Bu videoyu buldum ve kısaca ( videonun son birkaç dakikası @ 18:48), temelde ViewModel'de değerler atanan nakavt.js görünüm modeline sahip bir satır içi komut dosyasına sahip olarak görünüm modellerini kullanmanın bir yolunu buldum .
Bunu yapmanın tek yolu bu mu? Benim örneğimde bir görünüm modelleri koleksiyonuna ne dersiniz? Tüm değerleri çıkarıp nakavt olarak atamak için bir foreach döngüsüne veya başka bir şeye sahip olmam gerekir mi?
Html yardımcılarına gelince, video onlar hakkında hiçbir şey söylemiyor.
Pek çok insan bunun hakkında konuşmadığı için kafamı karıştıran 2 alan bunlar ve her örnek sadece sabit kodlanmış bir değer örneği olduğunda, başlangıç değerlerinin ve her şeyin görünüme nasıl ulaştığı konusunda kafamı karıştırıyor.
Düzenle
Darin Dimitrov'un önerdiği şeyi deniyorum ve bu işe yarıyor gibi görünüyor (yine de onun kodunda bazı değişiklikler yapmak zorunda kaldım). Belgeyi neden hazır kullanmak zorunda olduğumdan emin değilim ama bir şekilde her şey onsuz hazır değildi.
@model MvcApplication1.Models.Test
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var model = @Html.Raw(Json.Encode(Model));
// Activates knockout.js
ko.applyBindings(model);
});
</script>
</head>
<body>
<div>
<p>First name: <strong data-bind="text: FirstName"></strong></p>
<p>Last name: <strong data-bind="text: LastName"></strong></p>
@Model.FirstName , @Model.LastName
</div>
</body>
</html>Çalışması için bir jQuery belgesinin etrafına sarmak zorunda kaldım.
Ben de bu uyarıyı alıyorum. Ne hakkında olduğundan emin değilim.
Warning 1 Conditional compilation is turned off -> @Html.RawBu yüzden bir başlangıç noktam var sanırım en azından biraz daha oyun oynadığımda ve bunun nasıl çalıştığını güncelleyeceğim.
Etkileşimli öğreticilerden geçmeye çalışıyorum ancak bunun yerine bir ViewModel kullanıyorum.
Henüz bu parçaların üstesinden nasıl gelineceğinden emin değilim
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}veya
function AppViewModel() {
// ... leave firstName, lastName, and fullName unchanged here ...
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};Düzenle 2
İlk sorunu çözebildim. İkinci sorun hakkında hiçbir fikrim yok. Yine de. Herhangi bir fikri olan var mı?
@model MvcApplication1.Models.Test
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var model = @Html.Raw(Json.Encode(Model));
var viewModel = ko.mapping.fromJS(model);
ko.applyBindings(viewModel);
});
</script>
</head>
<body>
<div>
@*grab values from the view model directly*@
<p>First name: <strong data-bind="text: FirstName"></strong></p>
<p>Last name: <strong data-bind="text: LastName"></strong></p>
@*grab values from my second view model that I made*@
<p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
<p>Another <strong data-bind="text: Test2.Another"></strong></p>
@*allow changes to all the values that should be then sync the above values.*@
<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
<p>Another <input data-bind="value: Test2.Another" /></p>
@* seeing if I can do it with p tags and see if they all update.*@
<p data-bind="foreach: Test3">
<strong data-bind="text: Test3Value"></strong>
</p>
@*took my 3rd view model that is in a collection and output all values as a textbox*@
<table>
<thead><tr>
<th>Test3</th>
</tr></thead>
<tbody data-bind="foreach: Test3">
<tr>
<td>
<strong data-bind="text: Test3Value"></strong>
<input type="text" data-bind="value: Test3Value"/>
</td>
</tr>
</tbody>
</table>kontrolör
public ActionResult Index()
{
Test2 test2 = new Test2
{
Another = "test",
SomeOtherValue = "test2"
};
Test vm = new Test
{
FirstName = "Bob",
LastName = "N/A",
Test2 = test2,
};
for (int i = 0; i < 10; i++)
{
Test3 test3 = new Test3
{
Test3Value = i.ToString()
};
vm.Test3.Add(test3);
}
return View(vm);
}