Cet article a fait l'objet d'une traduction automatique.

Aperçu du client

Liaisons intégrées de Knockout pour HTML et JavaScript

John Papa

Téléchargez l'exemple de Code

Knockout apporte une implémentation de la liaison de données riche développement HTML5 et JavaScript. Une fois que vous comprendre le concept des observables, le moyen le plus facile à glisser dans le développement avec Knockout est pour comprendre la variété des liaisons intégrées qu'elle offre. Liaisons intégrées du knock-out sont le moyen le plus simple de tirer parti de ses fonctionnalités de liaison de données et ajouter la liaison de données robuste à de nombreux aspects de votre apps HTML5. La colonne précédente introduit Knockout, couvert de ses divers types d'observables et explore le contrôle des liaisons intégrées de flux. Cette fois je vais fouiller dans les liaisons intégrées de Knockout. Les exemples de code, vous pouvez télécharger à archive.msdn.microsoft.com/mag201203ClientInsight, montrent comment utiliser les diverses liaisons intégrées et expliquer les scénarios dans lesquels vous pouvez les utiliser.

Vous pouvez télécharger la dernière version de Knockout (actuellement 2.0.0) de bit.ly/scmtAi et le référencer dans votre projet, ou vous pouvez utiliser l'extension du gestionnaire de Package NuGet Visual Studio (disponible à bit.ly/dUeqlu) pour télécharger Knockout.

Quelles sont les liaisons intégrées en finale ?

À son niveau le plus élémentaire, la liaison de données requiert une source de liaison (comme un objet JavaScript) et une cible de se lier à (un élément HTML, par exemple). La source de liaison est souvent appelée un modèle de point de vue. L'élément cible peut avoir plusieurs propriétés, donc il est important de savoir quelle propriété cible à lier, ainsi. Par exemple, si vous souhaitez lier votre propriété firstName de vue modèle de texte d'une balise d'entrée, vous souhaitez lier à la fixation de la valeur finale. Dans ce cas, Knockout identifie la propriété de la cible par l'intermédiaire de ses liaisons intégrées : valeur. Liaisons Knockout intégrées vous permettent de lier aux propriétés ainsi que les méthodes de votre modèle de point de vue. Knockout inclut plusieurs liaisons intégrées qui lient des éléments de la cible, afficher les propriétés de modèle que j'aborderai dans cet article.

La syntaxe pour l'utilisation de liaisons intégrées est d'inclure le nom de liaison Knockout et les paires de propriété du modèle vue à l'intérieur de la propriété de liaison de données d'un élément HTML. Si vous souhaitez des données lier à plus d'une propriété dans l'élément HTML, simplement séparé les liaisons par une virgule à l'aide de la syntaxe suivante :

data-bind="built-in-binding:viewmodel-property1, another-built-in-binding:viewmodel-property2"

Suivant ce modèle, vous pouvait lier valeur de l'élément d'entrée à la propriété affichage modèle salePrice, comme suit :

<input type="text" data-bind="value:salePrice " />

Liaisons intégrées de Knockout vous permettent de gérer la plupart des scénarios de liaison, mais si vous rencontrez un scénario de liaison spécialisé qui n'est pas couverte, vous pouvez créer des liaisons personnalisées avec Knockout, trop. Je couvrirai les liaisons personnalisées dans un futur article.

Liaisons fondamentales : texte et html

Nous allons plonger en explorant les liaisons intégrées que Knockout fournit. La figure 1 montre le modèle de point de vue que tous les exemples dans cet article utilise pour leurs liaisons intégrées. L'exemple de données est pour une guitare, mais c'est juste pour montrer les liaisons.

Figure 1 modèle de point de vue avec des propriétés, imbriqués les enfants et les méthodes

my.showroomViewModel = {
  id: ko.observable("123"),
  salePrice: ko.observable(1995),
  profit: ko.observable(-7250),
  rating: ko.observable(4),
  isInStock: ko.observable(true),
  model: {
          code: ko.observable("314ce"),
          name: ko.observable("Taylor 314 ce")
  },
  colors: ko.observableArray([
          { key: "BR", name: "brown" },
          { key: "BU", name: "blue" },
          { key: "BK", name: "black"}]),
  selectedColor: ko.observable(""),
  selectedColorsForDropdown: ko.observableArray([]),
  selectedColorForRadio: ko.observableArray(),
  allowEditing: ko.observable(true),
  isReadonly: ko.observable(true),
    onSalesFloor: ko.observable(true),
    qty: ko.observable(7),
  photoUrl: ko.observable("/images/314ce.png"),
  url: ko.observable("http://johnpapa.
net"),
  details: ko.observable("<strong><em>This guitar rocks!</em></strong>"),
  checkboxHasFocus: ko.observable(false),
  textboxHasFocus: ko.observable(false),
  buttonHasFocus: ko.observable(false),
  userInput: ko.observable(""),
  setFocusToCheckbox: function () {
          this.checkboxHasFocus(true);
  },
  displayValue: function () {
          if (this.userInput().length > 0) {
                  window.alert("You entered: " + this.userInput());
          }
  },
  detailsAreVisible: ko.observable(false),
  showDetails: function () {
          this.detailsAreVisible(true);
  },
  hideDetails: function () {
          this.detailsAreVisible(false);
  },
  useUniqueName: ko.observable(true)
};
ko.applyBindings(my.showroomViewModel);

Peut-être la liaison plus courante est la fixation du texte. Lorsque Knockout voit une liaison de texte, il définit la propriété innerText pour Internet Explorer, ou la propriété équivalente dans les autres navigateurs. Lorsque la liaison de texte est utilisée, tout texte précédent est remplacé. La liaison du texte est souvent utilisée pour afficher des valeurs dans un espace ou un div. Cet exemple lie la propriété de model.code du modèle de l'avis d'une durée de :

<span data-bind="text: model.code"></span>

La liaison du html n'est pas utilisée aussi souvent, mais c'est très pratique pour rendre le contenu HTML de votre modèle de point de vue. Dans l'exemple suivant, le contenu de la propriété html est rendu, rendant le texte en gras italique :

<tr>
  <td><div class="caption">html</div></td>
  <td><div data-bind="html: details"></div></td>
  <td><span>details: </span><span data-bind="text: details"></span></td>
</tr>

Vous pouvez voir les résultats de ces exemples dans Figure 2 (et tous les exemples en exécutant la page 04-builtin-bindings.html dans l'exemple de code). Tous les exemples montrent la liaison intégrée, la cible et les valeurs de la source du modèle de point de vue.

Figure 2 le texte Knockout et liaisons HTML

Fixation de la valeur

Liaison de données est sans doute plus utile pour les applications qui sont très interactifs, donc il est logique que la plupart des liaisons intégrées dans bind de Knockout aide aux éléments d'entrée et de forme, telles que les listes des zones de texte, cases à cocher et liste déroulante. Nous allons explorer ces liaisons intégrées par la première démonstration de la polyvalence de la liaison de la valeur du knock-out.

La valeur de liaison fonctionne avec beaucoup de code HTML input types pour lier une propriété de modèle de point de vue directement à la valeur d'un élément d'entrée HTML, comme un bouton de contrôle textbox checkbox ou radio. L'exemple suivant illustre la propriété affichage modèle model.code liée à un contrôle textbox. La propriété est définie en utilisant la fonction observable de Knockout, qui rend à aviser la cible lorsque la valeur source change :

<td><input type="text" data-bind="value: model.code"/></td>
<td><span>model.code: </span><span data-bind="text: model.code"></span></td>

Si un utilisateur modifie la valeur dans la zone de texte, la nouvelle valeur est envoyée de la cible (textbox) à la source (voir modèle model.code propriété) lorsque l'utilisateur onglets loin de la zone de texte. Toutefois, vous pouvez utiliser aussi une liaison Knockout spéciale pour dire Knockout pour mettre à jour la cible à la source sur chaque frappe. Dans l'exemple suivant, la valeur du contrôle textbox est liée à la propriété des salePrice modèle du point de vue et de la liaison valueUpdate est liée à afterkeydown. valueUpdate est un paramètre pour la fixation de la valeur qui vous aide à définir lors de la fixation de la valeur doit être mise à jour. Ici, le code est dit Knockout pour mettre à jour la source après chaque clé dans la presse (vous pouvez essayer cet exemple en exécutant l'exemple de code ; les résultats sont présentés dans les Figure 3) :

<td><input type="text" data-bind="value: salePrice, valueUpdate: 'afterkeydown'"/></td>
<td><span>salePrice: </span><span data-bind="text: salePrice"></span></td>

Figure 3 la valeur de liaison de zones de texte

Liaison des cases à cocher et boutons Radio

Cases à cocher peuvent être données liées à élimination directe vérifié la liaison. La liaison vérifiée doit être liée à une propriété ou une expression qui correspond à la valeur true ou false. Parce que les propriétés de modèle de point de vue sont définies comme des observables, la case à cocher est mis à jour lorsque la propriété source. De même, lorsqu'un utilisateur active ou désactive la case à cocher, la valeur est à jour dans la propriété de modèle de point de vue. L'exemple suivant affiche la case à cocher est liée à la propriété isInStock (du modèle de l'avis Figure 1; les résultats sont présentés dans les Figure 4) :

<td><input type="checkbox" data-bind="checked: isInStock"/></td>
<td><span>isInStock: </span><span data-bind="text: isInStock"></span></td>

Figure 4 la liaison cochée

Vous pouvez également utiliser la liaison cochée pour sélectionner un bouton radio d'un groupe de boutons radio. L'exemple suivant montre un ensemble de boutons de radio dont les valeurs sont toutes codées en dur pour les codes à deux lettres représentant une couleur ; Lorsqu'un utilisateur sélectionne une couleur via le bouton de la radio, la propriété checked est définie et la propriété selectedColorForRadio de vue modèle est mis à jour la valeur de deux lettres :

<td>
  <input type="radio" value="BR" data-bind=
    "checked:  selectedColorForRadio" /><span>brown</span>
  <input type="radio" value="BU" data-bind=
    "checked: selectedColorForRadio" /><span>blue</span>
  <input type="radio" value="BK" data-bind=
    "checked: selectedColorForRadio" /><span>black</span>
</td>
<td><span>selectedColorForRadio: </span><span data-bind=
  "text: selectedColorForRadio"></span></td>

Alors que cela fonctionne parfaitement bien, il me paraît plus utile de données lier la liste des couleurs à une série de boutons radio, dont vous pouvez faire en combinant les trois liaisons intégrées : valeur, vérifié et foreach. Le modèle de point de vue Figure 1 a une propriété de couleurs, qui est un tableau d'objets contenant le nom de chaque couleur et une valeur de clé. La liaison foreach dans l'exemple suivant parcourt la propriété tableau de couleurs, définissant la valeur de chaque bouton liaison à la propriété de clé de la couleur et le texte d'une durée de liaison à la propriété name de la couleur :

<td>
  <div data-bind="foreach: colors">
    <input type="radio" data-bind=
      "value:key, checked: $parent.selectedColorForRadio" />
       <span data-bind="text: name"></span>
  </div>
</td>
<td><span>selectedColorForRadio: </span>
  <span data-bind="text: selectedColorForRadio"></span></td>

Liaison coché du bouton radio est affectée à la propriété affichage modèle selectedColorForRadio à l'aide de la fonction de parent $. Cependant, la liaison ne peut simplement être liée directement à cette propriété parce que la liaison foreach modifié le contexte du modèle d'affichage à la propriété de couleurs. Pour lier correctement à la propriété du modèle de la vue, le code doit renvoyer au parent du contexte (dans ce cas, le modèle estime lui-même). La fonction de parent $ Knockout raconte Knockout pour faire référence à un niveau haut de la hiérarchie de contexte, données qui liant la liaison cochée à la propriété selectedColorForRadio de vue modèle. (Il y a beaucoup de fonctions utiles et de trucs comme ça que j'explorerai dans futur articles.) Les résultats de cet exemple sont présentées en Figure 5.

Figure 5 le Checked et liaisons de valeur pour les boutons Radio

Liaison de listes déroulantes

Listes déroulantes ont plusieurs propriétés importantes pour charger une liste d'éléments, afficher une valeur, utilisez une valeur de clé différente et stocker la sélection de l'utilisateur. Knockout fournit une liaison prédéfinie pour chacune d'elles.

Les options de liaison identifie une liste de valeurs à afficher, habituellement d'une propriété du tableau sur le modèle du point de vue. L'exemple de cette section définit les options de liaison à la propriété de couleurs du modèle point de vue. Parfois vous souhaitez afficher une valeur dans la liste déroulante, mais utiliser une autre valeur lorsqu'un utilisateur sélectionne un élément dans la liste. Aident les liaisons intégrées d'optionsText et optionsValue du knock-out. La liaison optionsText est définie sur le nom de chaîne de la propriété à afficher dans la liste déroulante, les options de liaison. La liaison optionsValue est définie sur le nom de chaîne de la propriété à lier à la valeur sélectionnée de l'élément dans la liste déroulante. Dans cet exemple, le tableau de couleurs contient des objets avec un nom et une propriété de clé, dont le nom sera utilisé pour l'optionsText et la clé de l'optionsValue. La liaison de la valeur est définie pour la propriété selectedColor de vue modèle, où la sélection de l'utilisateur sera stockée :

<td>
  <div class="caption">options, value, optionsText, optionsValue</div>
  <div>select (single selection dropdowns)</div>
</td>
<td><select data-bind="options: colors, value: selectedColor,
   optionsText: 'name', optionsValue: 'key'" ></select></td>
<td><span>selectedColor: </span><span data-bind="text: selectedColor"></span></td>

Si vous souhaitez autoriser les sélections multiples à partir d'une liste déroulante, vous ajoutez d'abord la propriété multiple pour l'élément select HTML. Ensuite vous remplacez liaison (singulier) de selectedOption de Knockout avec sa liaison (au pluriel) de selectedOptions :

<td>
  <div class="caption">options, selectedOptions, optionsText, optionsValue</div>
  <div>select (multiple selection dropdowns)</div>
</td>
<td><select data-bind="options: colors,selectedOptions: selectedColorsForDropdown,
  optionsText: 'name', optionsValue: 'key'" multiple="multiple" ></select></td>
<td><span>selectedColorsForDropDown: </span><span data-bind=
  "text: selectedColorsForDropdown"></span></td>

Parce que le HTML sélectionnez élément est autoriser plusieurs sélections, la propriété de selectedColorsForDropdown modèle de vue (qui est définie sur la liaison intégré selectedOptions) contient une liste délimitée par des virgules des valeurs pour les sélections.

Figure 6 montre les résultats de choisir les deux couleurs bleues et noires. Notez que la liste déroulante affiche le nom de la couleur (bleu et noir), mais utilise la clé (BU et BK) comme les valeurs sélectionnées.

La figure 6, liaison de listes déroulantes

Activation et désactivation des éléments Input

Knockout fournit des liaisons intégrées pour activer et désactiver les éléments d'entrée. La liaison activer permettra à l'élément input si la propriété à qu'il est lié évalue à true et désactivera l'élément si elle évalue à false. La liaison de désactivation est exactement le contraire :

<td>
  <input type="checkbox" data-bind="checked: allowEditing"/>
  <input type="text" data-bind="enable: allowEditing, value:salePrice" />
</td>
<td><span>allowEditing: </span><span data-bind="text: allowEditing"></span></td>

Cet exemple de code montre que la valeur de la case à cocher est lié à la propriété allowEditing vue modèle, qui est également liée à la zone de texte aux données permettent de liaison. Quand la case est cochée, la zone de texte est activée ; lorsqu'il est désactivé, la zone de texte est désactivé.

En revanche, l'exemple suivant illustre comment la case cochée liaison est lié à la propriété isReadonly modèle de point de vue et la zone de texte désactiver la liaison est définie à la propriété isReadonly. Donc lorsque la case est cochée, la zone de texte est désactivé (les résultats des deux échantillons peuvent être vu dans Figure 7) :

<td>
  <input type="checkbox" data-bind="checked: isReadonly"/>
  <input type="text" data-bind="disable: isReadonly, value:salePrice" />
</td>
<td><span>is readonly: </span><span data-bind="text: isReadonly"></span></td>

Figure 7 liaisons pour l'activation et la désactivation d'éléments

Lie le Focus

Knockout a une liaison intégrée portant le nom hasfocus qui détermine quel élément a le focus. La liaison hasfocus est utile lorsque vous souhaitez que le focus à un élément spécifique d'un formulaire. Si plusieurs éléments ont la hasfocus en liaison avec des valeurs à la valeur true, l'accent est fixée à l'élément qui a son hasfocus définir plus récemment. Le mot clé true à déplacement focus directement à un élément, vous pouvez définir la liaison hasfocus. Ou vous pouvez le lier à une propriété de modèle de point de vue, comme illustré dans l'exemple de code dans Figure 8.

La figure 8, définissant la liaison Hasfocus

<td>
  <input type="checkbox" data-bind="hasfocus: checkboxHasFocus"/>
  <input type="text" data-bind="hasfocus: textboxHasFocus"/>
  <button data-bind="click: setFocusToCheckbox, hasfocus:buttonHasFocus">
    set focus to checkbox</button>
  <br/>
  <span data-bind="visible: checkboxHasFocus">checkbox has focus</span>
  <span data-bind="visible: textboxHasFocus">textbox has focus</span>
  <span data-bind="visible: buttonHasFocus">button has focus</span>
</td>
<td>
  <span>checkboxHasFocus: </span><span data-bind="text: checkboxHasFocus">
    checkbox has focus</span>
  <br/>
  <span>textboxHasFocus: </span><span data-bind="text: textboxHasFocus">
    textbox has focus</span>
  <br/>
  <span>buttonHasFocus: </span><span data-bind="text: buttonHasFocus">
    button has focus</span>
</td>

Ce code définit la liaison hasfocus appropriée pour une case à cocher, zone de texte et un élément button trois propriétés de modèle de point de vue différent. Lorsque le focus est défini sur un de ces éléments HTML, la liaison hasfocus correspondante définit la propriété de modèle de point de vue sur true pour l'élément (et les autres à false). Vous pouvez essayer cet exemple avec le code téléchargeable, ou voir les résultats en Figure 9, où un utilisateur a placé le focus dans la zone de texte.

La figure 9 de liaison pour définir le Focus

Liaison de la visibilité

Fixation visible par élimination directe doit être liée à une propriété qui a la valeur true ou false. Cette liaison sera la valeur style d'affichage de l'élément visible si vrai (true ou une valeur non null) ou none si false (faux, 0, undefined ou null).

L'exemple suivant montre la liaison de la case à cocher activée et la liaison visible de textbox, que la valeur à la propriété onSalesFloor de vue modèle. Lorsque la case à cocher est activée, la propriété onSalesFloor est définie sur true et le contrôle textbox devient visible. Lorsque la case à cocher est désactivée, la propriété onSalesFloor est définie sur false, et la zone de texte n'est plus visible (voir Figure 10) :

<td>
  <input type="checkbox" data-bind="checked: onSalesFloor"/>
  <input type="text" data-bind="visible: onSalesFloor, value:qty" />
</td>
<td>
  <span>onSalesFloor: </span><span data-bind="text: onSalesFloor"></span>
</td>

La figure 10 de liaison pour la visibilité

Liaisons d'événements

Knockout prend en charge la liaison à n'importe quel événement à travers ses liaisons intégrées de l'événement, mais il a également deux liaisons intégrées spéciales pour cliquer et soumettre. La liaison clic devrait servir sur un élément lorsque vous souhaitez lier l'événement click à une méthode dans un modèle de point de vue. Il est plus souvent utilisé avec un bouton, d'entrée ou un un élément, mais peut être utilisé avec n'importe quel élément HTML.

Le code suivant définit le clic bouton lier à la méthode displayValue sur le modèle de la vue ; en Figure 1, vous pouvez voir que la méthode displayValue sur le modèle de vue affiche simplement la vue modèle entrée propriété (qui est liée à la zone de texte) avec une alerte :

<td>
  <input type="text" data-bind="value: userInput"/>
  <button data-bind="click: displayValue">display value</button>
</td>
<td>
  <span>userInput: </span><span data-bind="text: userInput"></span>
</td>

Quand vous souhaitez lier une méthode de modèle de point de vue d'un événement autre que cliquer, vous pouvez utiliser la liaison d'événement de Knockout. Parce que la liaison de clic est la liaison plus utilisée pour les événements, il est simplement un raccourci à la liaison de l'événement.

Liaison d'événement du knock-out permet de lier à n'importe quel événement. Pour utiliser la liaison de l'événement, vous passez une valeur nom contenant littéral d'objet paires pour le nom de l'événement et la méthode de modèle de point de vue, séparées par des virgules. L'exemple de code suivant définit la liaison d'événement intégré de Knockout afin que les événements mouseover et mouseout sont liés aux méthodes showDetails et hideDetails sur le modèle du point de vue. Ces méthodes définissent la vue modèle observables propriété detailsAreVisible à true ou false, en conséquence :

<td>
  <div data-bind="text:model.code, event: {mouseover: showDetails,
    mouseout: hideDetails}"></div>
  <div data-bind="visible: detailsAreVisible" style="background-color: yellow">
    <div data-bind="text:model.
name"></div>
    <div data-bind="text:salePrice"></div>
  </div>
</td>
<td>
  <span>detailsAreVisible: </span><span data-bind="text: detailsAreVisible"></span>
</td>

Le deuxième div définit la liaison visible sur les détails du modèle vue­AreVisible propriété, lorsque l'utilisateur déplace la souris sur la première balise div, le deuxième div devient visible. Lorsque la souris est déplacée loin de la première division, la deuxième div n'est plus visible. Les résultats sont présentés dans les Figure 11. La liaison de soumettre (ne pas indiqué dans Figure11) accepte une entrée geste qui soumettra un formulaire HTML.

Figure 11, cliquez sur les liaisons d'événements

Fixations de style

Vous pouvez lier des styles avec Knockout en utilisant le css et liaisons intégrées style. La liaison css peut être définie à l'un ou les noms de classe css plus valides. L'exemple suivant montre que le contrôle textbox a la valeur lie ensemble à la propriété de profit du modèle point de vue et son css lie ensemble un objet littéral. L'objet literal contient un ou des css plus classe s'appliquent les noms et une expression correspondante qui doit évaluer à true ou false :

<td>
  <input data-bind="value:profit, css: {negative: profit() < 0,
    positive: !(profit() < 0), }"/>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ?
'negative' : 'positive'"></span>
</td>

Par exemple, si la propriété profit évalue à moins de 0, le négatif nommée de la classe css sera appliqué. De même, la seconde expression est évaluée et si il est vrai, le positif nommée de la classe css sera appliqué.

Alors que je recommande à l'aide des classes css lorsque cela est possible, vous pouvez parfois définir un style spécifique aussi bien. Knockout prend en charge cela avec ses liaisons intégrées de style. Dans l'exemple suivant, la couleur de la zone de texte change au rouge si le bénéfice est inférieur à 0 et vert si le bénéfice est supérieur à 0 (les résultats pour les liaisons de la css et le style sont indiquées en Figure 12) :

<td>
  <input data-bind="value:profit, style: {color: profit() < 0 ? '
red' :
    'green'}"></input>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ? '
red' :
    'green'"></span>
</td>

La figure 12 liaisons de Style

Liaison d'autres attributs HTML

Knockout a plusieurs liaisons intégrées, vous rencontrerez sûrement certaines situations qui n'en existe pas. Dans ce cas, Knockout offre la liaison attr intégré, qui permet de que vous aux données liez un attribut à une propriété de modèle de point de vue. C'est très utile dans de nombreux scénarios courants, tels que la liaison le href et le titre de l'un élément :

<td>
  <a data-bind="attr: {href: url, title: model.
name}, text:model.code"></a>
</td>
<td><span>url: </span><span data-bind="text: url"></span></td>

Un autre est souvent utilisé pour la liaison attr faire lier son attribut src à la propriété view de photoUrl modèle de l'élément img (vous pouvez voir les résultats de ces échantillons dans deux Figure 13) :

<td>
  <img data-bind="attr: {src: photoUrl, alt: model.code}" class="photoThumbnail"/>
</td>
<td><span>photoUrl: </span><span data-bind="text: photoUrl"></span></td>

La figure 13, liaison d'attributs de l'élément

Récapitulation

Cet article explore plusieurs des liaisons intégrées qui offre des Knockout. Il y a quelques autres, notamment la liaison de modèle, qui je couvrirai dans un futur article. En tout cas, les concepts sont les mêmes. Déterminer la propriété de liaison que vous souhaitez utiliser sur l'élément cible et le membre de modèle de point de vue auquel vous souhaitez lier. Une fois que vous saisissez observables de Knockout et sa variété de liaisons intégrées, vous avez les blocs de construction fondamentaux pour créer des applications Web robustes, utilisant le modèle Model View View, ou MVVM.

John Papa a travaillé au sein des équipes Silverlight et Windows 8 de Microsoft, où il a animé la célèbre émission télévisée Silverlight. Il a présenté à l'échelle mondiale, à des conférences et sessions de conférences comme BUILD, MIX, Professional Developers Conference, Tech·Ed, Visual Studio Live ! et DevConnections. Il rédige également des articles pour Visual Studio Magazine (Papa's Perspective) et a créé des vidéos de formation avec Pluralsight. Suivez-le sur Twitter à l'adresse twitter.com/john_papa.

Merci à l'expert technique suivant d'avoir relu cet article : Steve Sanderson