Benefits

1. Each WindnTrees view is mutually independent and contextually scoped.
2. A programmer can add CRUDL operations logic independently across WindnTrees views and HTML view sections.
3. WindnTrees views can be scripted together enabling interactive user behavior and dynamic html view.
4. WindnTrees CRUDView reduces effort for writing CRUDL logic that is built-in.
5. WindnTrees views extract json data and convert into "HTML view" ready knockoutjs data model.
6. Each WindnTrees view have a uri address, its own content type data model, observer object (set of observables) and messages repository.
7. Each WindnTrees view can extend observer object independently based on HTML view logic. Observer object acts as a view model.
8. Each WindnTrees view can integrate additional functions besides CRUDL to address operational and computational logic.
9. WindnTrees views allow event driven content processing if not satisfied by built-in functionality.
10. WindnTrees have server side support packages that enable smart coding with CRUDL functionality.
11. WindnTrees views can target and invoke server side controller actions without additional functional logic.
12. WindnTrees views can load referential list of records with simple coding in entity repositories from server side.

WindnTrees Multiple Independent Views Scripting

Multiple WindnTrees views can co-exist with one or more knockoutjs bindings. For example, following category and product views are bound to different and independent knockoutjs bindings:

        var categoryView = new CRUDView({
            'uri': '/category', //service uri address
            'observer': new CRUDObserver({ 'contentType': new Category({}), 
            'messages': intialize(new MessageRepository()) }) // observer
        });

Above script bindes categoryView CRUDView with HTML element having id 'ko-category-element'.

ko.applyBindings(categoryView.getObserverObject(), document.getElementById('ko-category-element'));

Where as,

            var productView = new CRUDView({
            'uri': '/product', //service uri address
            'observer': new CRUDObserver({ 'contentType': new Product({}), 'messages': 
            intialize(new MessageRepository()) }) // observer
        });

Above script bindes productView CRUDView with HTML element having id 'ko-product-element'.

ko.applyBindings(productView.getObserverObject(), document.getElementById('ko-product-element'));

WindnTrees Linked Views Scripting

WindnTrees views can be linked together to meet a view requirements in a single knockoutjs binding. For example, following category and topic views are bound to a single knockoutjs bindings:

        //main view
        var categoryView = new CRUDView({
            'uri': '/category', //service uri address
            'observer': new CRUDObserver({ 'contentType': new Category({}), 
            'messages': intialize(new MessageRepository()) }), // observer
            'views': new ListObserver({ object: new ObjectObserver({}) }) //listobserver and object observer hosts referenced views
        });

        //referenced view
        var topicView = new CRUDView({
            'key': 'topic-view',
            'uri': '/topic', //service uri address
            'objectkey': null, //set key here to referenced records
            'keyfield': 'CategoryId', //set key field that is required to be updated while storing new records automatically
            'observer': new CRUDObserver({ 'contentType': new Topic({}), 'messages': intialize(new MessageRepository()) }), // observer
            'fields': [
                {
                    'uri': '/skilllevel', // server side CRUDController uri address
                    'target': 'List', // CRUDController function that you want to invoke to get list results
                    'field': 'SkillLevelsList', // CRUDObserver will be extended with SkillLevelsList list observable (ko.observableArray)
                    'key': 'Title', // key (display) field bound with dropdown list
                    'value': 'Uid' // value field bound with dropdown list
                }]
        });

Amongst above views categoryView is the main while topicView is the referenced view. categoryView links topicView through referential list of observers via following:

            categoryView.getReferentialViews().newItem({ 'object': topicView });

Multiple views can be referenced together in peer configuration as follows:

            categoryView.getReferentialViews().newItem({ 'object': productView });
            categoryView.getReferentialViews().newItem({ 'object': skillLevelView });

Following bindes categoryView CRUDView with HTML element having id 'ko-binding-element'.

            ko.applyBindings(categoryView.getObserverObject(), document.getElementById('ko-binding-element'));

HTML and Knockout Binding of Referential Views

HTML with single knockoutjs binding will require following inner view bindings, for example,

<div data-bind="with: getReferentialView('topic-view').getObserverObject()"></div>

Where 'topic-view' is the key id of the topicView CRUDView. Multipe inner CRUDView bindings can co-exist accross same HTML element markup. Similarly, other linked views such as topicView can be distributed accross different markup elements of the same binding as follows:

           data-bind="with: getReferentialView('view-1').getObserverObject()"
           data-bind="with: getReferentialView('view-2').getObserverObject()"
           data-bind="with: getReferentialView('view-3').getObserverObject()"

Above view bindings can be dynamic besides development time scripting. For example, you may add new views at runtime with markup enabled or disabled based on your requirements.

            categoryView.getReferentialViews().newItem({ 'object': view-1 });
            categoryView.getReferentialViews().newItem({ 'object': view-2 });
            categoryView.getReferentialViews().newItem({ 'object': view-3 });

In such scenario user might require to synchronize DOM graph and html markup.

Linked Views Behaviour

All linked views in single binding behave according to their defined functionality, for example, SearchView enables listing and reading of records from CRUD data source, while, CRUDView enables CRUDL functions.

Summary

WindnTrees CRUDS provide efficient means of developing dynamic web pages. Views update their content without associations to each other and can be scripted together forming an interactive programming experience and GUI.

Download and try "distributed views" menu link from here.