/Demo/NakedObjects.Rest.App.Demo/scripts/TestBackbone.js

$(function () {



    var Result = Backbone.Model.extend({



    });



    var actions = "Actions";

    var ResultView = Backbone.View.extend({

        tagName: "div",

        className: "nof-objectview",





        template: $.templates("<div class='nof-object'><img/> {{:result.title}}</div>" +

                              "<div id='{{shortName:result.domainType}}-Actions'  class='nof-menu'>" +

                              "<div class='nof-menuname'>" + actions + "</div>" +

                              "<div class='nof-menuitems'>" +

                                 "{{for ~getActions(result.members)}}" +

                                     "<form id='{{shortName#data.result.domainType}}-{{:key}}' class='nof-action'>" +

                                     "<div><button>{{:value.extensions.friendlyName}}</button></div>" +

                                     "</form>" +

                                  "{{/for}}" +

                               "</div>" +

                               "<div  id='{{shortName:result.domainType}}-PropertyList' class='nof-propertylist'>" +

                                  "{{for ~getProperties(result.members)}}" +

                                     "<div class = 'nof-property'>" +

                                     "<label>{{:value.extensions.friendlyName}}</label>" +

                                     "<div class='nof-value'>{{:value.value}}</div>" +

                                     "</div>" +

                                  "{{/for}}" +

                                "</div>"),



        render: function () {



            $.views.converters({

                toArray: function (value) {

                    return _.toArray(value);

                }

            });



            $.views.converters({

                shortName: function (value) {

                    return value.substring(value.lastIndexOf(".") + 1, value.length);

                }

            });





            $.views.helpers({

                getFields: function (object) {

                    var key, value,

                        fieldsArray = [];

                    for (key in object) {

                        if (object.hasOwnProperty(key)) {

                            value = object[key];

                            // For each property/field add an object to the array, with key and value

                            fieldsArray.push({

                                key: key,

                                value: value

                            });

                        }

                    }

                    // Return the array, to be rendered using {{for ~fields(object)}}

                    return fieldsArray;

                }

            });





            $.views.helpers({

                getProperties: function (object) {

                    var key, value,

                        fieldsArray = [];

                    for (key in object) {

                        if (object.hasOwnProperty(key)) {

                            value = object[key];



                            if (value.memberType === "property") {



                                // For each property/field add an object to the array, with key and value

                                fieldsArray.push({

                                    key: key,

                                    value: value

                                });

                            }

                        }

                    }

                    // Return the array, to be rendered using {{for ~fields(object)}}

                    return fieldsArray;

                }

            });



            $.views.helpers({

                getActions: function (object) {

                    var key, value,

                        fieldsArray = [];

                    for (key in object) {

                        if (object.hasOwnProperty(key)) {

                            value = object[key];



                            if (value.memberType === "action") {



                                // For each property/field add an object to the array, with key and value

                                fieldsArray.push({

                                    key: key,

                                    value: value

                                });

                            }

                        }

                    }

                    // Return the array, to be rendered using {{for ~fields(object)}}

                    return fieldsArray;

                }

            });





            this.$el.html(this.template.render(this.model.toJSON()));

            return this;

        }

    });



    var ActionDetails = Backbone.Model.extend({

        invoke: function () {

            var invokeUrl = this.get("links")[2].href;

            var result = new Result();



            result.url = invokeUrl;



            result.fetch({

                success: function () {

                    var view = new ResultView({ model: result });

                    $("#main").html(view.render().el);

                }

            });

        },



        parse: function (response) {

            return response;

        }

    });



    var Action = Backbone.Model.extend({

        parse: function (response) {



            this.details = new ActionDetails();

            this.details.url = response.links[0].href; // todo make dependent on type not position 

            // test hard code 





            return response;

        }

    });



    var ActionList = Backbone.Collection.extend({

        model: Action,



        parse: function (response) {

            var membersAsArray = _.sortBy(_.toArray(response.members), function (i) { return i.extensions.memberOrder; });

            return membersAsArray;

        }

    });



    var Service = Backbone.Model.extend({

        parse: function (response) {

            var id = response.href.substring(response.href.lastIndexOf("/") + 1, response.href.length);

            response.id = id;

            this.actions = new ActionList();

            this.actions.url = "/services/" + id; //  eg /services/AdventureworksModel.CustomerRepository

            return response;

        }

    });



    var ServiceList = Backbone.Collection.extend({

        model: Service,



        url: "/services",



        parse: function (response) {

            return response.value;

        }

    });



    var ActionView = Backbone.View.extend({

        tagName: "form",

        className: "nof-action",



        template: $.templates("<div><button>{{:extensions.friendlyName}}</button></div>"),



        render: function () {

            this.$el.html(this.template.render(this.model.toJSON()));

            return this;

        },



        events: {

            "click :button": "select",

            "mouseover": "showTooltip"

        },



        select: function () {

            var details = this.model.details;



            details.fetch({

                success: function () {

                    details.invoke();

                }

            });

            return false;

        },



        showTooltip: function () {



        }

    });



    var ActionListView = Backbone.View.extend({

        tagName: "div",

        className: "nof-menuitems",



        render: function (eventName) {

            _.each(this.model.models, function (action) {

                $(this.el).append(new ActionView({ model: action }).render().el);

            }, this);

            return this;

        }

    });





    var ServiceView = Backbone.View.extend({

        tagName: "div",

        className: "nof-menu",



        template: $.templates("<div class='nof-menuname'>{{:title}}</div>"),



        render: function () {

            this.$el.html(this.template.render(this.model.toJSON()));

            this.$el.attr("id", this.model.get("id"));



            var serviceElement = this.$el;

            var actionsModel = this.model.actions;

            this.model.actions.fetch({

                success: function () {

                    var actionView = new ActionListView({ model: actionsModel });

                    serviceElement.append(actionView.render().el);

                }

            });



            return this;

        }

    });





    var ServiceListView = Backbone.View.extend({

        tagName: "div",

        className: "nof-servicelist",



        render: function (eventName) {

            _.each(this.model.models, function (service) {

                $(this.el).append(new ServiceView({ model: service }).render().el);

            }, this);

            return this;

        }

    });



    var AppRouter = Backbone.Router.extend({

        routes: {

            "": "home"

        },



        home: function () {



            var doc = document.location;



            var services = new ServiceList();

            services.fetch({

                success: function () {

                    $(".nof-servicelist").replaceWith(new ServiceListView({ model: services }).render().el);

                }

            });





        }

    });



    var app = new AppRouter();



    Backbone.history.start();



});



window.onerror = function(msg, url, linenumber) {

    alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);

    return true;

};



bindAjaxError = function() {

    $("div#main").ajaxError(function(e, xhr, settings) {

        //  errorDialog('Ajax Error', "Error in: " + settings.url + " \n" + "error:\n" + xhr.responseText);



        alert('ajax error');

    });

};