Knockout Validation with Bootstrap Popover

I wanted to use Twitter’s Bootstrap Popover’s to let the user know they need to enter values into each of the form’s inputs.
On top of Knockout’s Validation, I decided to create a custom Knockout binding that allows me to check if the Knockout observable is valid and either show or hide the popover with the error message.

See the image below for the final result.

Example of KO Validation with Popover

The mark up is

1
2
3
4
5
6
7
 <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group" data-bind="validationElement: item.notes">
                                    <textarea id="notes" rel="validatePopover" data-position="right" class="form-control input-sm" rows="3" placeholder="Notes ..." data-bind="value: item.notes, validationPopUp: item.notes"></textarea>
                                </div>
                            </div>
                        </div>

If you would like the knockout custom binding code, please visit Github.

Method chaining with deferring object creation

I have decided to write a couple of posts about how I used Method Chaining to help solve and better handle the creation of test data within my Unit Tests. This post and the example code via GitHub shows how I created test data using Method Chaining in a more generic form. There will be more posts to come regarding how this test data gets persisted into a in-memory database which will get used in XUnit Tests.

For my problem, I had to build up test data that will be used within a number of Unit Tests. Creating objects and assigning values to properties through Factory classes is considered a fairly normal approach, however being able to build up objects using method chaining gives me the flexibility to create objects with different characteristics.

For example, var foo = MyFooBuilder.Create().WithName(“My Foo”).WithAge(5).WithCar(“Audi”).Build(). This allows me to build up a foo object using a nice fluent chaining of methods compared to var foo = new Foo() { Name = “My Foo”, Age = 5, Car = “Audi” }. This allows me to keep all the Foo created code in a nice and tidy builder class which provides the flexibility to extend the builder to introduce new characteristics in the future.

What I ended up creating was a generic builder class that allows me to use a object of type T, build up a set of actions to get a newly created object. for example, var foo = MyBuilder.Create().WithProperty(new { Name = “MyPropertyName”, Value = “MyValue” }).Build();

You can view my builder class at https://github.com/codelabnz/BuilderExample