EmberJS - Fixations

La liaison est une fonctionnalité puissante d'Ember.js qui permet de créer un lien entre deux propriétés et si l'une des propriétés est modifiée, l'autre est mise à jour automatiquement. Vous pouvez également lier le même objet ou différents objets.

Syntaxe

ClassName1 = Ember.Object.create ({
   //code here
});

ClassName2 = Ember.Object.extend ({
   //code here
});

ClassName3 = ClassName2.create ({
   //code here
});

La syntaxe décrit la liaison de deux propriétés ClassName1 et ClassName2 . Si ClassName2 est mis à jour, il sera reflété dans ClassName1 .

Exemple

L'exemple suivant crée un lien entre deux propriétés et met à jour une propriété lorsqu'une autre propriété est modifiée -

import Ember from 'ember';

export default function() {
   var CarOne = Ember.Object.create ({
      //primary value
      TotalPrice: 860600
   });

   var Car = Ember.Object.extend ({
      //creates property which is an alias for another property
      TotalPrice: Ember.computed.alias('CarOne.TotalPrice')
   });

   var CarTwo = Car.create ({
      CarOne: CarOne
   });
   document.write('Value of car before updating: ' + CarTwo.get('TotalPrice'));
   
   //sets the car price
   CarTwo.set('TotalPrice', 930000);
   
   //above car price effects the CarOne
   document.write('<br>Value of car after updating: ' + CarOne.get('TotalPrice'));
}

Ouvrez maintenant le fichier app.js et ajoutez la ligne suivante en haut du fichier -

import objectmodelbindings from './objectmodelbindings';

Où, objectmodelbindings est un nom du fichier spécifié comme "objectmodelbindings.js" et créé dans le dossier "app".

Appelez ensuite les "objectmodelbindings" hérités en bas, avant l'exportation. Il exécute la fonction objectmodelbindings qui est créée dans le fichier objectmodelbindings.js -

objectmodelbindings();

Production

Exécutez le serveur de braise et vous obtiendrez la sortie suivante -

La liaison de modèle d'objet propage les changements dans une direction en utilisant la liaison unidirectionnelle qui est expliquée dans ce lien .