하사품
시간이 오래 걸렸지 만 여전히 몇 가지 뛰어난 질문이 있습니다. 현상금을 추가하여 이러한 질문에 대한 답변을 얻을 수 있기를 바랍니다.
- knockout.js와 함께 HTML 도우미를 사용하는 방법
문서를 작동시키기 위해 문서가 필요한 이유 (자세한 내용은 첫 번째 편집 참조)
뷰 모델에 녹아웃 매핑을 사용하는 경우 이와 같은 작업을 어떻게 수행합니까? 매핑으로 인해 기능이 없기 때문에.
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 };예를 들어 플러그인을 사용하고 싶습니다. 사용자가 요청을 취소하는 것처럼 관찰 가능 항목을 롤백하고 싶습니다. 마지막 값으로 되돌릴 수 있기를 원합니다. 내 연구에서 이것은 편집 가능한 것과 같은 플러그인을 만드는 사람들이 달성 한 것으로 보입니다.
매핑을 사용하는 경우 이와 같은 것을 어떻게 사용합니까? 나는 실제로 수동 매핑에있는 방법으로 가고 싶지 않다. 가능한 한 작은 인라인 자바 스크립트를 원하고 각 작업의 두 배처럼 보이는 것처럼 각 MVC viewMode 필드를 KO 모델 필드에 매핑하는 것이 었습니다. 왜 그 매핑을 좋아합니까?
나는 (매핑을 사용하여)이 작업을 쉽게하기 위해 많은 KO 힘을 잃을 것이지만, 반면에 수동 매핑은 많은 작업이 될 것이며 내 견해에 너무 많은 정보가 포함되도록 할 것입니다. 향후 유지 관리가 더 어려워 질 수 있습니다 (MVC 모델에서 속성을 제거하면 KO 뷰 모델에서도 이동해야 함)
원본 게시물
나는 asp.net mvc 3을 사용하고 있으며 꽤 멋지게 보일 때 녹아웃을 찾고 있지만 asp.net mvc와 특히 작동하는 뷰 모델을 이해하는 데 어려움을 겪고 있습니다.
나를 위해 지금 나는 이런 식으로
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과 같은 기본 속성이있는 Vm이 있고 그 위에 간단한 유효성 검사가 있습니다. Vm 모델에는 필요한 경우 다른 뷰 모델도 포함될 수 있습니다.
그런 다음이 Vm을 View에 전달하면 html 도우미를 사용하여 사용자에게 표시 할 수있었습니다.
@Html.TextBoxFor(x => x.CourseName)학생 뷰 모델 모음에서 데이터를 가져 오는 foreach 루프 또는 무언가가있을 수 있습니다.
그런 다음 양식을 제출 할 때 jquery를 사용 serialize array하여 뷰 모델에 다시 바인딩하는 컨트롤러 작업 메소드로 보냅니다.
knockout.js를 사용하면 뷰 모델을 얻었을 때 완전히 다르며 모든 예제에서 HTML 도우미를 사용하지 않는 것으로 나타났습니다.
knockout.js와 함께이 두 가지 MVC 기능을 어떻게 사용합니까?
나는 이 비디오를 발견 했고 간략하게 ( 비디오의 마지막 몇 분 @ 18:48) ViewModels에 값이 할당되는 knockout.js viewmodel이있는 인라인 스크립트를 기본적으로 사용하여 뷰 모델을 사용하는 방법에 들어갑니다.
이것이 유일한 방법입니까? 예제에서 뷰 모델 모음을 사용하는 것은 어떻습니까? 모든 값을 추출하여 녹아웃에 할당하려면 foreach 루프 또는 무언가가 있어야합니까?
HTML 도우미에 관해서는 비디오가 그들에 대해 아무 말도하지 않습니다.
많은 사람들이 그것에 대해 이야기하는 것처럼 보이지 않기 때문에 나에게 혼란을 일으키는 두 가지 영역이 있습니다.
편집하다
Darin Dimitrov가 제안한 것을 시도하고 있는데 이것이 효과가있는 것 같습니다 (그의 코드를 약간 변경해야했습니다). 왜 문서를 준비해야했는지 확실하지 않지만 문서가 없으면 모든 것이 준비되지 않았습니다.
@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>나는 그것을 작동시킬 준비가 된 jquery 문서를 감싸 야했다.
나는 또한이 경고를 받는다. 그것이 무엇인지 확실하지 않습니다.
Warning 1 Conditional compilation is turned off -> @Html.Raw그래서 나는 출발점을 가지고 있는데, 적어도 몇 가지 더 놀았을 때 업데이트 될 것이라고 생각합니다.
대화 형 자습서를 거치려고하지만 대신 ViewModel을 사용하려고합니다.
아직이 부분을 다루는 방법을 모르겠습니다
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}또는
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
};편집 2
첫 번째 문제를 알아낼 수있었습니다. 두 번째 문제에 대한 실마리는 없습니다. 그러나. 누구든지 아이디어가 있습니까?
@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>제어 장치
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);
}