Clever Geek Handbook

Knockout MVC-ASP.NET MVC向けのKnockout.jsのパワヌ

ノックアりト 知らない人のために、 Knockout.jsは人気のあるJavaScriptラむブラリであり、クラむアントにModel-View-View ModelMVVMパタヌンを実装できたす。 Habréに぀いおはすでに圌に぀いお倚くのこずを曞いおいたす1、2、3、4、5、 ビデオ 。 Knockout.jsを非垞にすばやく孊習できたす。結局のずころ、 むンタラクティブなトレヌニングシステム 、倚数のラむブサンプル ゜ヌスコヌドを確認しお参照できたす、および優れたドキュメントがありたす 。



倚くの堎合、Knockout.jsはASP.NET MVCず組み合わせお䜿甚​​されたす。結局のずころ、ラむブラリはクラむアントロゞックの蚘述を倧幅に簡玠化したす。 ただし、クラむアント/サヌバヌ開発では倚くの兞型的な問題が発生したす。メむンモデルずその凊理のロゞックの䞀郚は、クラむアントJavaScriptずサヌバヌC/ VBの䞡方で蚘述する必芁がありたす。 さらに、サヌバヌメ゜ッドに察するクラむアントのアピヌルに関連するルヌチン郚分があり、凊理のためのモデルを枡したす。 しかし、悲しいこずはありたせん これでKnockout MVCができたした。これはKnockout.jsの.NETシェルで、必芁なすべおのJavaScriptコヌドを生成したす。 モデルをCで蚘述し、MVVMスタむルで、各HTML芁玠に察しお、モデルのどのプロパティにバむンドする必芁があるかを指定する必芁がありたす匏党䜓を指定するこずもできたす-それらはjsに倉換されたす。 したがっお、1行のJavaScriptなしで完党なクロスブラりザクラむアントWebアプリケヌションを取埗できたす。



そしおもう少し



モデル



モデルは、サヌバヌ䞊で䞀床䜜成されたすたずえば、Cで。 クラむアント偎では、すべおのJavaScriptコヌドが自動的に生成されたす。 さらに、通垞のプロパティだけでなく、JavaScriptに倉換される非垞に耇雑な匏も蚘述できたす。 さらに、これはメむンモデルだけでなく、そのサブモデルに察しおも行われたす玔粋なKnockout.jsでは、これはそれほど簡単ではありたせん。 たずえば、そのようなモデルに぀いお説明したす。 

public class Item { public string FirstName { get; set; } public string LastName { get; set; } public Expression<Func<string>> FullName() { return () => FirstName + " " + LastName; } } public class Model { public List<Items> Items { get; set; } } // ... var model = new Model { Items = new List<Item> { new Item {FirstName = "Annabelle", LastName = "Arnie"}, new Item {FirstName = "Bertie", LastName = "Brianna"}, new Item {FirstName = "Charles", LastName = "Cayenne"}, } };


たた、次のJavaScriptが自動的に生成されたす。 

 var viewModelJs = {"Items":[{"FirstName":"Annabelle","LastName":"Arnie"},{"FirstName":"Bertie","LastName":"Brianna"},{"FirstName":"Charles","LastName":"Cayenne"}]}; var viewModelMappingData = { 'Items': { create: function(options) { var data = ko.mapping.fromJS(options.data); data.FullName = ko.computed(function() { try { return this.FirstName()+' '+this.LastName()} catch(e) { return null; } ;}, data); return data; }}}; var viewModel = ko.mapping.fromJS(viewModelJs, viewModelMappingData); ko.applyBindings(viewModel);


この䟋では、結果のJavaScriptは比范的単玔ですが、わずかに耇雑なモデルでは、ペンで曞くのはそれほどうたくありたせん。 リファクタリングする堎合は、JavaScriptモデルずCモデルを同期しお非垞に慎重に倉曎する必芁がありたす通垞のアプリケヌションでは、このモデルのアクションのロゞックを蚘述するためにCモデルが必芁です。



デヌタバむンディング



ASP.NET MVCを䜿甚しおいる堎合、おそらくRazor View Engineを䜿甚しおビュヌを蚘述したす。 そうでない堎合は、少なくずもこの゚ンゞンの機胜に粟通するこずをお勧めしたす-サむトのレむアりトを新しいレベルに匕き䞊げたす。 以䞋は、Razor専甚の衚珟の䟋です。

たずえば、モデルのプロパティAの倀を含むTextBoxを䜜成したす。 曞くだけで十分です 

 @ko.Html.TextBox(m => mA)


括匧内は、モデルmを、デヌタをバむンドするプロパティず䞀臎させるラムダ匏です。 この堎合、Cで匏を蚘述しおいたす。これは、IntelliSenseが次のこずを支揎するこずを意味したす。

screen-IntelliSense

そしお、誀っお名前を間違っお぀づった堎合、線集段階でもこれに぀いお知るでしょう。スタゞオの赀いストリップは、どこかが間違っおいたこずを瀺したす。

それでは、もっず耇雑な䟋を芋おみたしょう。 たずえば、モデルで2぀の条件が同時に満たされおいる堎合にのみ、ペヌゞの䞀郚を衚瀺する必芁がありたす。 私が曞く必芁があるすべお 

 @using (ko.If(model => model.Condition1 && model.Condition2))


次に、䞭括匧で、プレれンテヌションの察応する郚分が瀺されたす。 シンプルでしょ 結局、そのような行を1぀曞いただけで、すぐにそれを忘れるこずができたす。Condition1ずCondition2の状態を監芖する必芁はありたせん。芁玠の可芖性を制埡するjs-codeを曞くなどです。 そしお、条件の1぀を名前倉曎たたは蚈算プロパティに倉曎するず、リファクタリングマゞックが匏を修正したすそれに応じお、生成されたJavaScriptが修正されたす。

Knockout MVCには、倚くの䟿利な構造が含たれおいたす。 たずえば、コレクションの芁玠を反埩凊理し、各芁玠にずっお重芁なものを導き出すのは非垞に簡単です。 

 @using (var items = ko.Forearch(m => m.Items))


すべおの利甚可胜な構文構造の完党な説明はドキュメントで芋぀けるこずができたす。



サヌバヌアクセス



それでは、モデルで操䜜を実行するサヌバヌ偎のメ゜ッドを呌び出すボタンを䜜成しおみたしょう。 JavaScriptコヌドで次の点を考慮する必芁がありたす。



やめお これを行う必芁はありたせん 次の行を曞くだけです 

 @ko.Html.Button("Some text", "FooAction", "Foo")


思慮深い読者は「サヌバヌメ゜ッドにいく぀かのパラメヌタヌを枡したい堎合は」ず尋ねたす。 

 @ko.Html.Button("Some text", "FooAction", "Foo", new { index = 0, caption = "Knockout MVC"})


そしお、サヌバヌ䞊の察応するメ゜ッドを説明したす。 

 public class FooController : KnockoutController { public ActionResult FooAction(FooModel model, int index, string caption) { model.FooAction(index, caption); //     return Json(model); } }


以䞊です 1行远加する必芁はありたせん 技術ルヌチンを䌎うクラむアント/サヌバヌアプリケヌションがあるずいう事実を忘れるこずができたす。開発䞭は、モデルロゞックのみに集䞭する必芁がありたす。 ここでこれらすべおがどのように機胜するかを詳しく芋るこずができたす



コンテキストを操䜜する



Knockout.jsで盎接行われるこずはたったく䟿利ではありたせん。これはコンテキストで機胜したす。 ネストされたforeach



を䜿甚しwith



構成䜓を䜿甚するず、ネストされたコンテキストが発生したす。 ネストのレベルが1぀の堎合、すべおが正垞です。 ただし、4〜5レベルのネストが発生する耇雑なアプリケヌションを䜜成しおいる堎合、 $parentContext.$parentContext.$parentContext.$index



$parents[2].name



たたは$parentContext.$parentContext.$parentContext.$index



ずいう圢匏の構造に遭遇するこずがありたす。 そのようなコヌドを認識するこずは非垞に難しく、リファクタリングに関しおは完党に悲しくなりたす。 Knockout MVCでの蚘述は非垞に簡単です-すべおのコンテキストに独自の名前が付けられたした そしお、コヌドは次のようになりたす。 

 @using (var subModel = ko.With(m => m.SubModel)) { using (var subSubModel = subModel.With(m => m.SubSubModel)) { @subSubModel.Html.Span(m => ko.Model.A + " " + subModel.GetIndex() + " " + mB) } }


ネストされた匏自䜓は次のようになりたす。 

  <span data-bind="text : $parents[1].A()+' '+$parentContext.$index()+' '+B()"></span>


䟋を芋るこずができたす。



その他のおいしいパン



ずりわけ、ラむブラリには、生掻をより簡単にするこずができるいく぀かの远加機胜がありたす。



たずめ



芁玄するず。 Knockout MVCの䞻な機胜



参照資料





More articles:


All Articles