Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

22 mai 2014 4 22 /05 /mai /2014 19:19

Le but est de bien structurer les fichiers (séparation des responsabilités), c’est-à-dire ne pas mélanger tout dans un seul fichier JavaScript.

J’utilise :

  •  jQuery

  • Knockoutjs pour le « binding »

  • Web Api

 

Model (person.js)

/// <reference path="knockout-3.1.0.js" />

 

var Person = function (id, name) {

 

    this.Id = ko.observable(id);

    this.Name = ko.observable(name);

}

 

Service (personservice.js)

/// <reference path="jquery-2.1.1.js" />

/// <reference path="knockout-3.1.0.js" />

/// <reference path="../models/person.js" />

 

var getAll = function (persons) {

 

    var options = {

        url: "/api/persons",

        type: "GET",

    };

 

    function querySucceeded(data) {

        data.forEach(function (item) {

            var p = new Person(item.Id, item.Name);

                        persons.push(p);

        });

    }

    return $.ajax(options).then(querySucceeded);

 

    // Autre possibilité

    //$.getJSON("/api/persons", function (data) {

    //    data.forEach(function (item) {

    //        var p = new Person(item.Id, item.Name);

    //        persons.push(p);

    //    });

    //})

};

 

ViewModel (persons.js)

/// <reference path="jquery-2.1.1.js" />

/// <reference path="knockout-3.1.0.js" />

/// <reference path="../models/person.js" />

/// <reference path="../services/personservice.js" />

 

$(function () {

 

    var Persons = ko.observableArray();

 

    var vm = {

        Persons: Persons

    }

 

    var refresh = function () {

        return getAll(Persons);

    };

 

    refresh();

 

    ko.applyBindings(vm);

});

 

Et la page (Default.html)

<body>

 

    <form>

        <ul data-bind="foreach: Persons">

            <li>

                <span data-bind="text: Name"></span>

            </li>

        </ul>

    </form>

 

    <script src="Scripts/jquery-2.1.1.js"></script>

    <script src="Scripts/knockout-3.1.0.js"></script>

    <script src="Scripts/services/personservice.js"></script>

    <script src="Scripts/models/person.js"></script>

    <script src="Scripts/viewmodels/persons.js"></script>

</body>

 

 

Le contrôleur et le Model utilisés par celui-ci sont ultra simples

 

public class PersonsController : ApiController

    {

        public IEnumerable<Person> Get()

        {

            return new List<Person>(){new Person(1,"Bellin, Marie"),

                                      new Person(2,"Adams, Angie")};

        }

    }

 

    public class Person

    {

        public int Id { get; set; }

        public string Name { get; set; }

 

        public Person(int id, string name)

        {

            this.Id = id;

            this.Name = name;

        }

    }

 

On peut pousser plus loin en utilisant Durandal, ce qui fera l'objet sans doute d'un article .

Partager cet article

Repost 0

commentaires