Backbone.js sem espinhas em ASP.NET Web Forms



Backbone.js é uma biblioteca MV* de JavaScript com uma interface JSON RESTful e permite preparar as aplicações JS com uma espinha dorsal de Models, Views, Collections e Events resolvendo vários problemas do código esparguete ou spaghetti code.


Exemplo de uma lista de Hellos
index.html

<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World Part 2</title>
    <meta charset="UTF-8">
</head>

<body>
    <div class="wrapper">

        <h1>Greetings</h1>

        <div id="otherDiv"></div>

        <ul id="helloListWithTemplate">
            <script type="text/template" id="hello-template">
                Hello, {{name}}
            </script>
        </ul>
       
    </div>

    <!-- JQuery Backbone.js -->
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/libs/underscore-1.8.3.min.js"></script>
    <script src="Scripts/libs/backbone-1.3.3.min.js"></script>
    <script src="Scripts/grettings.js"></script>

</body>
</html>


grettings.js (dados locais em memória)

// Backbone.js
$(document).ready(function () {

    ///
    ///Model Class Area
    ///
    var Hello = Backbone.Model.extend({

        idAttribute: 'id',

        defaults: function () {
            return {
                id: "",
                name: "default"
            };
        }

    });


    ///
    ///Collection Class Area
    ///
    var HelloList = Backbone.Collection.extend({
        model: Hello,

    });



    ///
    ///View Class Area
    ///

    var HelloViewUsingTemplate = Backbone.View.extend({

        tagName: 'li',

        model: Hello,

        templateSettings: _.templateSettings = {
                      interpolate : /\{\{(.+?)\}\}/g
                      evaluate : /\{(.+?)\}/g; 
                     };

        //template: _.template($('#hello-template').html()),

        template: $("#hello-template").html(),

        render: function () {

            //$(this.el).html(this.template(this.model.attributes));

            var local_template = _.template(this.template);
            this.$el.html(local_template(this.model.attributes));

            return this;
        }

    });

    var HelloListViewUsingTemplate = Backbone.View.extend({

        el: '#helloListWithTemplate',

        initialize: function () {

            this.render();

        },

        render: function () {
            this.$el.html();

            this.collection.each(function (helloModel) {

                var helloViewUsingTemplate = new HelloViewUsingTemplate({
                    model: helloModel
                });

                this.$el.append(helloViewUsingTemplate.render().el);

            }.bind(this));

            return this;

        }

    });



    ///
    ///Model instances Area
    ///

    var helloCollection = new HelloList([{ "id": 1, "name": "Local value 1" }, { "id": 2, "name": "Local value 2" }, { "id": 3, "name": "Local value 3" }], { model: Hello });

    //create a new hello collection view instance
    var hellolistviewusingtemplate = new HelloListViewUsingTemplate({
        collection: helloCollection
    });


    //JQuery
    $('#otherDiv').html('This line does nothing.
');

});


Relacionado: Backbone.js sem espinhas



Referência: Introduction to Backbone.js, Using Underscore.js with ASP.NET
Licença CC BY-SA 4.0 Silvia Pinhão Lopes, 2.12.17
Print Friendly and PDF

Sem comentários:

Com tecnologia do Blogger.