Karunia
Sudah beberapa saat dan saya masih memiliki beberapa pertanyaan luar biasa. Saya berharap dengan menambahkan hadiah mungkin pertanyaan-pertanyaan ini akan dijawab.
- Bagaimana Anda menggunakan html helpers dengan knockout.js
Mengapa dokumen siap diperlukan untuk membuatnya berfungsi (lihat edit pertama untuk informasi lebih lanjut)
Bagaimana saya melakukan sesuatu seperti ini jika saya menggunakan pemetaan sistem gugur dengan model tampilan saya? Karena saya tidak memiliki fungsi karena pemetaan.
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 };Saya ingin menggunakan plugin misalnya saya ingin dapat mengembalikan yang dapat diamati seolah-olah pengguna membatalkan permintaan saya ingin dapat kembali ke nilai terakhir. Dari penelitian saya ini tampaknya dapat dicapai oleh orang yang membuat plugin seperti yang dapat diedit
Bagaimana saya menggunakan sesuatu seperti itu jika saya menggunakan pemetaan? Saya benar-benar tidak ingin pergi ke metode di mana saya miliki dalam pemetaan manual tampilan saya adalah saya memetakan setiap bidang viewMode MVC ke bidang model KO karena saya ingin sesedikit mungkin javascript sebaris mungkin dan yang sepertinya menggandakan pekerjaan dan itu mengapa saya suka pemetaan itu.
Saya khawatir untuk membuat pekerjaan ini mudah (dengan menggunakan pemetaan) saya akan kehilangan banyak daya KO tetapi di sisi lain saya khawatir bahwa pemetaan manual hanya akan banyak pekerjaan dan akan membuat pandangan saya mengandung terlalu banyak informasi dan mungkin menjadi lebih sulit di masa depan untuk mempertahankan (katakanlah jika saya menghapus properti dalam model MVC saya harus memindahkannya juga di model tampilan KO)
Pos Asli
Saya menggunakan asp.net mvc 3 dan saya melihat ke sistem gugur karena terlihat cukup keren tapi saya mengalami kesulitan mencari tahu cara kerjanya dengan asp.net mvc terutama melihat model.
Bagi saya sekarang saya melakukan sesuatu seperti ini
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; }
}Saya akan memiliki Vm yang memiliki beberapa properti dasar seperti CourseName dan akan memiliki beberapa validasi sederhana di atasnya. Model Vm mungkin berisi model tampilan lain di dalamnya juga jika diperlukan.
Saya kemudian akan meneruskan Vm ini ke Tampilan jika saya akan menggunakan html helpers untuk membantu saya menampilkannya kepada pengguna.
@Html.TextBoxFor(x => x.CourseName)Saya mungkin memiliki beberapa loop foreach atau sesuatu untuk mendapatkan data dari koleksi Model Student View.
Lalu ketika saya akan mengirimkan formulir saya akan menggunakan jquery dan serialize array dan mengirimkannya ke metode tindakan pengontrol yang akan mengikatnya kembali ke model view.
Dengan knockout.js semuanya berbeda karena Anda sekarang punya viewmodels untuk itu dan dari semua contoh yang saya lihat mereka tidak menggunakan html helpers.
Bagaimana Anda menggunakan 2 fitur MVC ini dengan knockout.js?
Saya menemukan video ini dan secara singkat (beberapa menit terakhir dari video @ 18:48) masuk ke cara untuk menggunakan viewmodels dengan pada dasarnya memiliki skrip inline yang memiliki viewmodel knockout.js yang mendapatkan nilai-nilai dalam ViewModel.
Apakah ini satu-satunya cara untuk melakukannya? Bagaimana kalau dalam contoh saya dengan memiliki koleksi viewmodels di dalamnya? Apakah saya harus memiliki loop foreach atau sesuatu untuk mengekstrak semua nilai keluar dan menetapkannya ke sistem gugur?
Adapun pembantu html video tidak mengatakan apa-apa tentang mereka.
Ini adalah 2 area yang membingungkan saya karena tidak banyak orang yang membicarakannya dan membuat saya bingung bagaimana nilai awal dan semuanya terlihat saat contoh hanya beberapa contoh nilai hard-coded.
Edit
Saya mencoba apa yang disarankan Darin Dimitrov dan ini tampaknya berhasil (saya harus membuat beberapa perubahan pada kodenya). Tidak yakin mengapa saya harus menggunakan dokumen siap tetapi entah bagaimana semuanya tidak siap tanpanya.
@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>Saya harus membungkusnya di sekitar dokumen jquery yang siap untuk membuatnya berfungsi.
Saya juga mendapat peringatan ini. Tidak yakin tentang apa semua ini.
Warning 1 Conditional compilation is turned off -> @Html.RawJadi saya punya titik awal, saya kira setidaknya akan memperbarui ketika saya melakukan lebih banyak bermain-main dan bagaimana ini bekerja.
Saya mencoba melalui tutorial interaktif tetapi menggunakan ViewModel sebagai gantinya.
Belum yakin bagaimana cara mengatasi bagian-bagian ini
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}atau
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
};Edit 2
Saya sudah bisa mencari tahu masalah pertama. Tidak ada petunjuk tentang masalah kedua. Namun demikian. Ada yang punya ide?
@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>Pengendali
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);
}