Tiền thưởng
Đã được một lúc và tôi vẫn còn một vài câu hỏi nổi bật. Tôi hy vọng bằng cách thêm một tiền thưởng có thể những câu hỏi này sẽ được trả lời.
- Làm thế nào để bạn sử dụng trình trợ giúp html với knoutout.js
Tại sao tài liệu đã sẵn sàng cần thiết để làm cho nó hoạt động (xem chỉnh sửa đầu tiên để biết thêm thông tin)
Làm cách nào để làm điều gì đó như thế này nếu tôi đang sử dụng ánh xạ loại trực tiếp với các mô hình chế độ xem của mình? Vì tôi không có chức năng do ánh xạ.
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 };Tôi muốn sử dụng các plugin chẳng hạn, tôi muốn có thể khôi phục các vật thể quan sát như thể người dùng hủy yêu cầu mà tôi muốn để có thể quay lại giá trị cuối cùng. Từ nghiên cứu của tôi, điều này dường như đạt được bởi những người tạo ra các plugin như có thể chỉnh sửa
Làm thế nào để tôi sử dụng một cái gì đó như thế nếu tôi đang sử dụng bản đồ? Tôi thực sự không muốn đi đến một phương thức mà tôi có trong ánh xạ thủ công trong chế độ xem của mình là tôi ánh xạ từng trường MVC viewMode sang trường mô hình KO vì tôi muốn càng ít javascript nội tuyến càng tốt và nó giống như gấp đôi công việc và đó là tại sao tôi thích ánh xạ đó
Tôi lo ngại rằng để làm cho công việc này trở nên dễ dàng (bằng cách sử dụng ánh xạ) tôi sẽ mất rất nhiều năng lượng KO nhưng mặt khác tôi lo ngại rằng ánh xạ thủ công sẽ chỉ là rất nhiều công việc và sẽ làm cho quan điểm của tôi chứa quá nhiều thông tin và trong tương lai có thể trở nên khó bảo trì hơn (giả sử nếu tôi xóa một thuộc tính trong mô hình MVC thì tôi cũng phải di chuyển nó trong chế độ xem KO)
Bài gốc
Tôi đang sử dụng asp.net mvc 3 và tôi đang tìm kiếm loại trực tiếp vì nó trông khá tuyệt nhưng tôi gặp khó khăn khi tìm hiểu cách nó hoạt động với asp.net mvc đặc biệt là xem các mô hình.
Đối với tôi ngay bây giờ tôi làm một cái gì đó như thế này
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; }
}Tôi sẽ có một Vm có một số thuộc tính cơ bản như CourseName và nó sẽ có một số xác nhận đơn giản trên đầu trang của nó. Mô hình Vm cũng có thể chứa các mô hình xem khác trong đó nếu cần.
Sau đó tôi sẽ chuyển Vm này cho View là tôi sẽ sử dụng trình trợ giúp html để giúp tôi hiển thị nó cho người dùng.
@Html.TextBoxFor(x => x.CourseName)Tôi có thể có một số vòng lặp foreach hoặc một cái gì đó để lấy dữ liệu ra khỏi bộ sưu tập Mô hình Chế độ xem của sinh viên.
Sau đó, khi tôi gửi biểu mẫu, tôi sẽ sử dụng jquery serialize arrayvà gửi nó đến một phương thức hành động của bộ điều khiển để liên kết nó lại với viewmodel.
Với knoutout.js, tất cả đều khác biệt khi bạn có chế độ xem cho nó và từ tất cả các ví dụ tôi thấy họ không sử dụng trình trợ giúp html.
Làm thế nào để bạn sử dụng 2 tính năng này của MVC với knoutout.js?
Tôi đã tìm thấy video này và nó ngắn gọn (vài phút cuối của video @ 18:48) đi vào cách sử dụng chế độ xem bằng cách cơ bản có một tập lệnh nội tuyến có chế độ xem knockout.js được gán các giá trị trong ViewModel.
Đây có phải là cách duy nhất để làm điều đó? Làm thế nào về ví dụ của tôi với việc có một bộ sưu tập viewmodels trong đó? Tôi có phải có một vòng lặp foreach hoặc một cái gì đó để trích xuất tất cả các giá trị ra và gán nó vào loại trực tiếp không?
Đối với người trợ giúp html, video không nói gì về họ.
Đây là hai lĩnh vực khiến tôi bối rối vì dường như không có nhiều người nói về nó và điều đó khiến tôi bối rối về cách các giá trị ban đầu và mọi thứ đang được xem khi ví dụ chỉ là một ví dụ giá trị được mã hóa cứng.
Biên tập
Tôi đang thử những gì Darin Dimitrov đã đề xuất và điều này dường như hoạt động (tôi đã phải thực hiện một số thay đổi đối với mã của anh ấy). Không chắc tại sao tôi phải sử dụng tài liệu sẵn sàng nhưng bằng cách nào đó mọi thứ vẫn chưa sẵn sàng nếu không có nó.
@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>Tôi đã phải bọc nó xung quanh một tài liệu jquery sẵn sàng để làm cho nó hoạt động.
Tôi cũng nhận được cảnh báo này. Không chắc chắn tất cả những gì về nó.
Warning 1 Conditional compilation is turned off -> @Html.RawVì vậy, tôi có một điểm khởi đầu tôi đoán ít nhất sẽ cập nhật khi tôi thực hiện thêm một số trò chơi xung quanh và cách thức hoạt động của nó.
Tôi đang cố gắng thực hiện các hướng dẫn tương tác nhưng thay vào đó hãy sử dụng ViewModel.
Không chắc chắn làm thế nào để giải quyết những phần này chưa
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}hoặc là
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
};Chỉnh sửa 2
Tôi đã có thể tìm ra vấn đề đầu tiên. Không có manh mối về vấn đề thứ hai. Mặc dù vậy. Bất cứ ai có ý tưởng?
@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>Bộ điều khiển
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);
}