เงินรางวัล
มันไม่นานมานี้และฉันยังมีคำถามที่ค้างอยู่สองสามข้อ ฉันหวังว่าโดยการเพิ่มรางวัลบางทีคำถามเหล่านี้จะได้รับคำตอบ
- คุณใช้ html helpers กับ 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 };ฉันต้องการใช้ปลั๊กอินเช่นฉันต้องการสามารถย้อนกลับ observables ราวกับว่าผู้ใช้ยกเลิกการร้องขอฉันต้องการที่จะสามารถกลับไปที่ค่าสุดท้าย จากการวิจัยของฉันสิ่งนี้น่าจะเกิดขึ้นได้จากการที่คนทำปลั๊กอินอย่างที่สามารถแก้ไขได้
ฉันจะใช้บางอย่างเช่นนี้ได้อย่างไรถ้าฉันใช้แผนที่? ฉันไม่ต้องการไปที่วิธีการที่ฉันมีในการทำแผนที่มุมมองด้วยตนเองคือฉันทำแผนที่แต่ละฟิลด์ 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; }
}ฉันจะมี Vm ที่มีคุณสมบัติพื้นฐานบางอย่างเช่น CourseName และจะมีการตรวจสอบง่าย ๆ อยู่ด้านบน โมเดล Vm อาจมีโมเดลมุมมองอื่น ๆ เช่นกันหากจำเป็น
จากนั้นฉันจะส่ง Vm นี้ไปยังมุมมองฉันจะใช้ผู้ช่วย html เพื่อช่วยแสดงให้ผู้ใช้เห็น
@Html.TextBoxFor(x => x.CourseName)ฉันอาจมีลูป foreach หรืออะไรบางอย่างเพื่อดึงข้อมูลออกมาจากคอลเลกชันของ Student View Models
จากนั้นเมื่อฉันจะส่งแบบฟอร์มฉันจะใช้ jquery และserialize arrayส่งไปยังวิธีการดำเนินการของตัวควบคุมที่จะผูกกลับไปที่ viewmodel
ด้วย knockout.js มันแตกต่างอย่างสิ้นเชิงเมื่อคุณได้รับ viewmodels สำหรับมันและจากตัวอย่างทั้งหมดที่ฉันเห็นพวกเขาไม่ได้ใช้ตัวช่วย html
คุณจะใช้คุณสมบัติ 2 อย่างของ MVC กับ knockout.js ได้อย่างไร
ฉันพบวิดีโอนี้และสั้น ๆ (ไม่กี่นาทีสุดท้ายของวิดีโอ @ 18:48) ไปสู่วิธีการใช้ viewmodels โดยทั่วไปมีสคริปต์แบบอินไลน์ที่มีรูปแบบ knockout.js ที่ได้รับการกำหนดค่าใน ViewModel
นี่เป็นวิธีเดียวที่จะทำได้หรือไม่? ในตัวอย่างของฉันเกี่ยวกับการมีคอลเลกชันของวิวโหมดในนั้น ฉันจะต้องมีวง foreach หรือสิ่งที่จะแยกค่าทั้งหมดออกและกำหนดให้เป็นสิ่งที่น่าพิศวง?
ในฐานะที่เป็นผู้ช่วย HTML วิดีโอไม่ได้พูดอะไรเกี่ยวกับพวกเขา
นี่เป็นพื้นที่ 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));
// 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);
}