Баунті
Минуло деякий час, і у мене ще є пара невирішених питань. Я сподіваюся, що додавши щедроту, можливо, на ці запитання отримають відповіді.
- Як ви користуєтеся 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 };Наприклад, я хочу використовувати плагіни, я хочу мати можливість відкатати спостережувані дані, як якщо користувач скасовує запит, я хочу мати можливість повернутися до останнього значення. З мого дослідження, схоже, цього досягають люди, які роблять плагіни як редаговані
Як я можу використовувати щось подібне, якщо використовую картографування? Я дійсно не хочу переходити до методу, коли в моєму огляді маю ручне картографування: я позначаю кожне поле MVC viewMode на поле моделі KO, оскільки я хочу якомога менше вбудованого JavaScript, і це просто схоже на подвійну роботу, і це чому мені подобається таке картографування.
Я стурбований тим, що щоб зробити цю роботу легкою (за допомогою картографування), я втрачу багато сил КО, але, з іншого боку, я переживаю, що ручне картографування буде просто багато роботи і змусить мої погляди містити занадто багато інформації та в майбутньому може стати важче підтримувати (скажімо, якщо я видаляю властивість у моделі 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 може містити в ній і інші моделі перегляду, а також за потреби.
Потім я передавав би цей ВМ на Перегляд, якби я використовував html-помічники, щоб допомогти мені відобразити його користувачеві.
@Html.TextBoxFor(x => x.CourseName)У мене можуть бути кілька циклів передбачення або щось, щоб отримати дані з колекції моделей перегляду студентів.
Тоді, коли я надсилаю форму, я б використовував jquery і serialize arrayпересилав його до методу дій контролера, який би прив'язував його до перегляду.
З knockout.js все по-іншому, тому що ви тепер отримали для цього перегляд моделей, і з усіх прикладів я бачив, що вони не використовують html-помічників.
Як ви використовуєте ці 2 функції MVC з knockout.js?
Я знайшов це відео, і воно коротко (останні кілька хвилин відео @ 18:48) переходить до способу використання viewmodels, в основному має вбудований сценарій, який має viewmodel knockout.js, який отримує присвоєні значення у ViewModel.
Це єдиний спосіб зробити це? Як щодо мого прикладу з колекцією моделей перегляду? Чи повинен я мати цикл foreach чи щось, щоб витягнути всі значення та призначити його нокаутом?
Щодо html-помічників, відео про них нічого не говорить.
Це дві сфери, які збивають з пантелику мою людину, бо не так багато людей, здається, говорять про це, і це залишає мене збентеженим тим, як початкові значення і все стає на думку, коли колись приклад - це лише якийсь жорсткий приклад цінності.
Редагувати
Я пробую те, що запропонував Дарин Димитров, і це, здається, спрацювало (мені довелося внести деякі зміни в його код). Не впевнений, чому мені довелося використовувати готовий документ, але якось все не було готове без нього.
@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);
}