matths / knockout-experiments

some basic knockout examples

knockout experiments

knockout.js is a nice MVVM (Model View ViewModel) framework for easily binding values to DOM elements (View), with a small footprint, and is good for rapid prototyping.

You can open the example directly at http://matths.github.io/knockout-experiments/ and look into the source using the developer tools of your favourite browser.

custom elements

It also enables the creation of custom html dom elements (close to web components) with the same kind of binding. (http://knockoutjs.com/documentation/component-custom-elements.html)

my examples so far

I just started building a basic example. So far it offers insights two the following stuff:

• creation / use of custom elements
• mode switching (view/edit)
• custom attributes (knockout.js itself offers just the data-bind attribute for components and the params attribute for custom elements)

using https://github.com/SteveSanderson/ko-custom-elems-test/blob/master/lib/knockout-customElements.js by @SteveSanderson

<editable-label content="{{yourContentVar}}"></editable-label>

• reuse of custom elements

<name-form firstname="{{firstname}}" lastname="{{lastname}}"></name-form>

applications using knockout.js

I have found that the skype web client is using knockout.js https://web.skype.com/. How cool is that? ;)

knockout-experiments's Issues

Error When Node Lacks getAttribute Method

First off, thanks for providing this library (the Knockout people were clearly smoking something when they came up with the params= syntax). You rock.

However, when I first tried to use it I got an error in the _nodeIsCustomComponentElement method because one of the nodes passed in (I'm guessing a comment node) did not have that method. Of course, since a node without that method can't possibly be a custom element, I was able to fix the problem by simply adding the following check:

function _nodeIsCustomComponentElement (node) {
    if (!node.getAttribute) return false; // my new line
    var noParams = node.getAttribute('params') === null;

Just thought you might want to add it to the library proper, and since I didn't want to hassle with a pull request for just a single line ...