/fdata%2F0451946%2Favatar-blog-1066097-tmpphp3M2yUZ.png){kind=avatar}
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 .
