バウンティ
しばらく経ちましたが、まだいくつかの未解決の質問があります。賞金を追加することで、これらの質問に答えられることを願っています。
- 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 };たとえば、プラグインを使用したいのですが、ユーザーがリクエストをキャンセルしたかのようにオブザーバブルをロールバックできるようにしたいのですが、最後の値に戻れるようにしたいのです。私の調査によると、これは編集可能なプラグインのようなプラグインを作成する人々によって達成されているようです
マッピングを使用している場合、どうすればそのようなものを使用できますか？ビューの手動マッピングにあるメソッドには行きたくありません。各MVCviewModeフィールドをKOモデルフィールドにマップします。インラインJavaScriptをできるだけ少なくしたいので、作業が2倍になるようです。なぜ私はそのマッピングが好きなのですか。
（マッピングを使用して）この作業を簡単にするために、多くのKOパワーが失われるのではないかと心配していますが、一方で、手動マッピングは多くの作業になり、ビューに多くの情報が含まれるようになるのではないかと心配しています。将来的には保守が難しくなる可能性があります（たとえば、MVCモデルでプロパティを削除した場合、KOビューモデルでもプロパティを移動する必要があります）
元の投稿
私はasp.netmvc3を使用していて、ノックアウトはかなりクールに見えるので調べていますが、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をビューに渡します。HTMLヘルパーを使用して、ユーザーに表示できるようにします。
@Html.TextBoxFor(x => x.CourseName)
StudentViewモデルのコレクションからデータを取得するためのforeachループなどがあるかもしれません。
次に、フォームを送信するときに、jqueryを使用serialize arrayして、ビューモデルにバインドするコントローラーアクションメソッドに送信します。
knockout.jsでは、ビューモデルを取得したため、すべてが異なります。私が見たすべての例から、HTMLヘルパーを使用していません。
ノックアウト.jsでMVCのこれら2つの機能をどのように使用しますか？
私はこのビデオを見つけました、そしてそれは簡単に（ビデオの最後の数分@ 18：48）、ViewModelの値が割り当てられるknockout.jsビューモデルを持つインラインスクリプトを基本的に持つことによってviewmodelを使用する方法に入ります。
これがそれを行う唯一の方法ですか？ビューモデルのコレクションを含む私の例ではどうですか？すべての値を抽出してノックアウトに割り当てるには、foreachループなどが必要ですか？
HTMLヘルパーに関しては、ビデオはそれらについて何も述べていません。
これらは、多くの人がそれについて話しているようには見えないので、私を混乱させる2つの領域であり、例がハードコードされた値の例である場合に、初期値とすべてがどのように表示されるのか混乱します。
編集
私はDarinDimitrovが提案したことを試していますが、これはうまくいくようです（ただし、彼のコードにいくつかの変更を加える必要がありました）。なぜドキュメントレディを使用しなければならなかったのかわかりませんが、どういうわけかそれなしではすべてがレディではありませんでした。
@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
私は最初の問題を理解することができました。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);
}
