Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicojs/knockouthelpers
Introducing DRY (Don't repeat yourself) principles and type safety to knockoutjs for ASP.NET MVC applications.
https://github.com/nicojs/knockouthelpers
Last synced: 25 days ago
JSON representation
Introducing DRY (Don't repeat yourself) principles and type safety to knockoutjs for ASP.NET MVC applications.
- Host: GitHub
- URL: https://github.com/nicojs/knockouthelpers
- Owner: nicojs
- Created: 2015-03-11T06:13:02.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-03-11T06:17:43.000Z (almost 10 years ago)
- Last Synced: 2024-10-16T02:47:30.910Z (2 months ago)
- Language: C#
- Size: 555 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Knockout helper for ASP.NET MVC
===============================
Introducing DRY (Don't repeat yourself) principles and type safety to knockoutjs for ASP.NET MVC applications.
## Examples
### ViewModel class (C#):
```c#
public class UserJson : JsonViewModel
{
public UserJson()
{ }
public int Id { get; set; }
public string Name { get; set; }
public AccountProvider Account { get; set; }
public List Hobbies { get; set; }
}
public class HobbyJson : JsonViewModel
{
public string Name { get; set; }
public int Score { get; set; }
}
public enum AccountProvider
{
Facebook,
Google,
}
```
### Json:
```javascript
{"Id":1,"Name":"jan","Account":1,"Hobbies":[{"Name":"Coden","Score":10},{"Name":"Sporten","Score":5}]}
```
### Glue it all together:
```javascript
$(function () {
$.getJSON('/Home/User')
.done(function (gebruiker) {
$('.js-voorbeeldjson').html(JSON.stringify(gebruiker));
ko.applyBindings(ko.mapping.fromJS(gebruiker), $('.ko-gebruiker').element);
});
});
```
### Type safety in the view:
Using lambda's (like Html.TextboxFor, Html.LabelFor, etc)
This: ```Model.SpanWithBindingFor(g => g.ScreenName)```
Result: ``````
### DRY If / else
Type-save if-else and switch statements in your template. Changing a property name will result in a red build! Awesome!
This:
```c#
using (var stmnt = Ko.IfFor(g => g.Account, AccountProvider.Google))
{
;
stmnt.Else();
;
}
```
Result:
```html
```
## More
Download the source code and run the application. Play with it:
* ForEachFor()
* SwitchFor(Enum/String lambda)
* stmnt.Case(EnumType.EnumValue)
* Typesafe knockout expressies opstellen
## How does it work?
It uses another base view page for your application. It is defined in the web.config of your views folder:
```xml
```
Instead of retrieving the actual data in your view, you retrieve a knockout template:
```c#
return View(new KnockoutViewModel());
```
Use the KnockoutViewModel to define your template.
```c#
@model KnockoutViewModel
```
Use Ko.IfFor, Ko.ForEachFor, stmnt.Else, Ko.SwitchFor. For all C# statements there is a knockout template equivalent
## Still to do..
* Add clientside validation