[Library] KnockOut MVC framework

KnockOut MVC framework

참조 URL

1. http://knockoutmvc.com/
   
2. https://github.com/AndreyAkinshin/knockout-mvc
   

 ASP.NET MVC에서 Knockoutjs를 사용하는 프로젝트에서 UI 컨트롤들을 쉽게 KnockOut와 바인딩이 되도록 Generated 된 코드를 만들어 주는 라이브러리다. 서버의 Model을 기반으로 브라우저에서 사용하는 ViewModel과 View Data를 자동으로 만들어 주고 있다. 사용방법은 아래 코드와 같이 사용하면 된다.

 아래 코드는 KnockOutMVC 프레임웍에서 샘플 코드인 HelloWorld이다.

public class HelloWorldModel { public string FirstName { get; set; } public string LastName { get; set; } [Computed] public string FullName { get { return FirstName + " " + LastName; } } }

[코드] Model

@using PerpetuumSoft.Knockout @model KnockoutMvcDemo.Models.HelloWorldModel @{ var ko = Html.CreateKnockoutContext(); } <p>First name: @ko.Html.TextBox(m => m.FirstName)</p><p>Last name: @ko.Html.TextBox(m => m.LastName)</p> <h2>Hello, @ko.Html.Span(m => m.FullName)!</h2> @ko.Apply(Model)

[코드] Razor

public class HelloWorldController : BaseController { public ActionResult Index() { InitializeViewBag("Hello world"); return View(new HelloWorldModel { FirstName = "Steve", LastName = "Sanderson" }); } }

[코드] Controller

<p>First name: <input data-bind="value : FirstName" /></p><p>Last name: <input data-bind="value : LastName" /></p> <h2>Hello, <span data-bind="text : FullName"></span>!</h2> <script type="text/javascript"> var viewModelJs = {"FirstName":"Steve","LastName":"Sanderson","FullName":"Steve Sanderson"}; var viewModel = ko.mapping.fromJS(viewModelJs); viewModel.FullName = ko.computed(function() { try { return ((this.FirstName() + ' ') + this.LastName())} catch(e) { return null; } ;}, viewModel); ko.applyBindings(viewModel); </script>

[코드] HTML (autogenerated)

 이와 같은 HTML의 Knockoutjs에서 사용하는 View데이터와 ViewModel을 서버에서 자도으로 만들어서 내보내 준다. 이제 웬만한 기능을 모델 설계 만으로 브라우저까지 일관되게 내려 받을 수 있게 되었다. ViewModel을 연결 시켜주는 노가다성 작업을 상당부분 줄여 줘 야근모드가 없어 지지 않을까 생각해 본다. 

 위와 같은 코드의 예제 말고도 다른 예제들이 있다. 관심이 있다면 직접 확인해 보도록 하자.

• COMMON EXAMPLES
• Hello world
• Click counter
• Simple list
• Better list
• Control types
• Working with collection
• Contacts editor
• Cart editor
• Gift list