This is a demo webapp that combines Mithril, Kendo UI, ASP.NET & Firebase.
- Mithril: Github Homepage
- Kendo UI: Telerik Homepage
- Firebase: Firebase
- Northwind Service: Service JSON
Please note that Kendo Grid belongs to the "Professional" version of Kendo UI and therefore needs a proper license to be used. Therefore I'm not providing the copyrighted scripts/styles to avoid violation of Telerik's license terms.
But there's a 30 day trial available: Kendo UI Trial License
The Kendo-Scripts should go into Scripts/kendo directory and CSS-files into Content/kendo. Or adjust the Bundles in App_Start/BundleConfig.js
This app served me to test Mithril's capabilities and how to combine it with some other frameworks. I recommend to read this introduction on integrating Mithril with other libraries.
The app itself is a "no-brainer" and the most complex part actually is the configuration of the Kendo-Grid in Scripts/app/demo.view.js.
Nevertheless, I tried to make this demo app somewhat "realistic" and added not only one grid-template but also a nested template for detail grid-views. Using nested templates in Kendo UI is rather problematic because you can't simply select elements by their "ids". More info on this peculiarity here.
This demo also supports retrieval of JSON-data from Firebase. You have to create a (free) Firebase account to play around with it. Look into demo.model.js for more information.
Regarding the Mithril framework I can only say: It's a great little tool! The emphasis is on great :)
But I'm still not sure if the Mithril components in this app are correct and completely following certain guidelines.
I discovered Mithril just a few days ago. So, if you find any problematic parts, please let me know.
This is the Kendo Grid with some Northwind Test-Data.
Firebase
The current Firebase integration shows a simple "three-way" data-binding between the view, the model and the database hosted at Firebase.com. If you change the value on Firebase, for example by sending a POST request via cURL, a respective event "child_added" will be fired and the app will change the value in the textbox.
Here I'm sending a POST message to my Firebase-server to store it under the /messages-path.
echo {"id":"1","user":"harris","msg":"Hello world!"} | curl https://FIREBASE-SERVER/messages.json -H "Accept: application/json" -H "Content-Type: application/json" -d @-
You can also change an existing value or create a new entry in Firebase by using the buttons.
More info on data handling, persisting and retrieval: Firebase Guide
MIT