Knockout UI - A UI component Library based on Knockout and JQuery UI

[Ian Mckay]

Hello,

I created a project for all the knockout components I've completed over the last 6 months or so. I spent a bit of time getting some examples/documentation done. There are others on the way but I haven't finished the remaining docs.

Currently included.

• A tree component that renders a windows 7 style explorer tree. Includes add, delete, drag n drop, rename, context menu.
• A context menu component to create dynamic context menu's on your ui's.
• A css style-able dropdown control that implements jquery autocomplete and replaces the standard select element.
• A window manager system that implement draggable, windows that can be minimized etc.

In the pipeline (I have the code for these but they need polishing and docs writing)

• A full datagrid that expands on the example in the KO docs. Allows searching/sorting, column selection and row deletion. Works with ajax or static data.
• A simple Flickr gallery.
• A simple tabs implementation.
• Style-able checkbox/radio replacements.

Your contributions and/or suggestions are welcome.

https://github.com/madcapnmckay/Knockout-UI

Cheers,

Ian

[rpn]

Nice work!

[mcoolin]

Very Nice! Thanks

[Mike Apken]

The knockout community comes through again.   Nice Work!!

--
Mike Apken

[Mike Apken]

Window Manager Binding is too sweet.   This one will be tested very shortly.   Came at the right time for me. 

Again, NICE.

--
Mike Apken

[Dave Ackerman]

Wow. This is very impressive man. Seems like you spent a lot of time on these. I'll definitely be using/contributing to this.

[Johan Nordberg]

Sounds awesome.. But a stupid question... How can I view the examples without downloading the repo?

[Ian Mckay]

I'll push them to my hosting and get a basic site up and running soon. In the meantime I think you have to download the repo. Sorry.

Ian

[Mike Apken]

The window is opened once the applyBindings is called.  So, we can control when to open the window.  How do you close the window.  Is there an un-applyBindings?

On Tue, May 17, 2011 at 9:34 AM, Ian Mckay <ianm...@gmail.com> wrote:

I'll push them to my hosting and get a basic site up and running soon. In the meantime I think you have to download the repo. Sorry.

Ian

--
Mike Apken

[Mike Apken]

Is it possible to have a template rendered inside of the `createWindowBody` function?

When you append, do => $(element).append('<div data-bind="template: { name: /"officeTemplate/", foreach: parentViewModel.offices  }"></div>');

On Tue, May 17, 2011 at 9:34 AM, Ian Mckay <ianm...@gmail.com> wrote:

I'll push them to my hosting and get a basic site up and running soon. In the meantime I think you have to download the repo. Sorry.

Ian

--
Mike Apken

[Ian Mckay]

It is possible to render a binding inside a window. Each window has a contents data item that is supplied on creation. This can act as a subViewModel and is available to the create function. I have updated the docs with a bit of sample code that should get you started.

In response to your earlier question. I updated the examples to also include an add window button and a example of closing a window. 

The window manager is admittedly fairly basic and I thought it would be more of a demo control but I'm happy to see some interest. I am keen to expand it if you think its useful.

Thanks,

Ian 

[Mike Apken]

Ian,

Thanks for taking the time to update your example.  That does help.   Spent a good time in your code today.  Truly a great learning experience to me.  It may not need to be stated, but I'm a noob to javascript and knockout.   This has open my eyes to a new way of thinking about knockout and the templating. 

I have been wanting to address the re-useable controls, simple-grid binding. Also, made me start looking at the renderTemplate and addTemplate functions.   I'm starting a new module in my current project.and this was the perfect time to try and implement the Revealing Module Pattern w/private and public properties/methods. I have come to learn with my project, that sticking everything in the global namespace and having all my templates in one page has become a mess. Coming from Silverlight and having the concept of 'controls', I have been trying to think of a way to reproduce this functionality of putting in a control and supply a dataSource. And have most of the functionality encapsulated in one spot. This has also made me start thinking that a VisualStateManager may be possible to implement on some level. 

Also, the way you use templates to generate the window is also very cool. I have only used templates to render a small bits of data contained in a static html styled div. 

I personally think the  window manager is great.  I have been wanting to add a modal box functionality. But have been putting off trying to get this functionality via jQuery's UI dialog box.

Have not got to the point yet, but I'm assuming that once you add the template with addTemplate and renderTemplate, that ko then updates the templates if you have observables being using in the template as if the template was added through the script tags?

Maybe it is just that my current stage of understanding knockout allows me the understand these concepts better (at least I think I understand them better), but today has been a great learning experience for me. It has been a challenge coming from C# and trying to force programming habits into javascript. 

Thanks, keep up the great work. 

--
Mike Apken

[Ian Mckay]

I am a C# developer and I am no JavaScript expert but I found KO worked with the way I think better than trying to do the same thing with pure jquery. 

I copied the component design pattern from Steve's paged grid example. http://knockoutjs.com/examples/grid.html

He states in the code for that one possible extension is to allow the developer to override the default templates for the grid. This is something I want to include in all the plugins but I haven't figured out the nicest way of doing this in a component scenario. If anyone has suggestions please let me know.

[gvas]

Hello,

Here's my implementation of jQuery UI widget bindings: http://gvas.github.com/knockout-jqueryui/index.html

Highlights:

• 7kb/2kb minified/compressed
• Isolated binding parameters.
• Proper disposal.
• Synchronous operation.
• Protected against multiple initializations.

Suggestions are welcome.

Regards

G

[rpn]

Nice work!