Bounty
Было немного, и у меня все еще есть пара нерешенных вопросов. Надеюсь, добавив щедрость, возможно, на эти вопросы ответят.
- Как вы используете html-помощники с knockout.js
-
Почему документ был готов для его работы (см. сначала редактирование для получения дополнительной информации)
-
Как мне сделать что-то подобное, если я использую сопоставление нокаутов с моими моделями просмотров? Поскольку у меня нет функции из-за отображения.
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 }; -
Я хочу использовать плагины, например, я хочу иметь возможность отката наблюдаемых, как если бы пользователь отменяет запрос, который я хочу, чтобы вернуться к последнему значению. Из моих исследований это, по-видимому, достигается людьми, создающими плагины вроде editables
Как я могу использовать что-то подобное, если я использую сопоставление? Я действительно не хочу идти к методу, в котором у меня есть ручное сопоставление. Я сопоставляю каждое поле MVC viewMode с полем модели KO, поскольку я хочу как можно меньше встроенного javascript, и это похоже на двойную работу, и именно поэтому я как это отображение.
-
Я обеспокоен тем, что для упрощения этой работы (с помощью сопоставления) я потеряю много мощности 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; }
}
У меня был бы Vm, у которого есть некоторые основные свойства, такие как CourseName, и он будет иметь простую проверку поверх него. Модель Vm также может содержать другие модели просмотра, если это необходимо.
Затем я передал бы этот Vm в View, я бы использовал html-помощники, чтобы помочь мне отобразить его пользователю.
@Html.TextBoxFor(x => x.CourseName)
У меня могут быть некоторые петли foreach или что-то, чтобы получить данные из коллекции моделей просмотра учащихся.
Тогда, когда я отправлю форму, я буду использовать jquery и serialize array и отправить ее методу действия контроллера, который привяжет его к viewmodel.
С knockout.js это все по-другому, так как теперь у вас есть viewmodels для него, и из всех примеров, которые я видел, они не используют html-помощники.
Как вы используете эти 2 функции MVC с knockout.js?
Я нашел это видео, и он вкратце (последние несколько минут видео @18:48) позволяет использовать viewmodels, в основном имея встроенный script, который имеет модель представления knockout.js, которая получает значения в ViewModel.
Это единственный способ сделать это? Как насчет моего примера с наличием в нем коллекции viewmodels? Должен ли я иметь цикл foreach или что-то, чтобы извлечь все значения и назначить его в нокаут?
Что касается html-помощников, видео ничего не говорит о них.
Это 2 области, которые смущают меня, поскольку не многие люди, похоже, говорят об этом, и это оставляет меня в замешательстве, как начальные значения и все приближается к мнению, когда когда-либо это пример, пример значения.
Edit
Я пробую то, что предложил Дарин Димитров, и это, кажется, работает (я должен был внести некоторые изменения в его код, хотя). Не уверен, почему мне пришлось использовать документ, но как-то все было без него.
@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);
}
