KnockoutJS - Reliure Attr

Cette liaison vous permet d'attribuer dynamiquement des éléments HTML attributeen utilisant la propriété ViewModel. Par exemple, vous pouvez définir l'attribut src pour une image,title attribut pour la page HTML, ou un href pour un lien dans la balise basé sur des valeurs dans ViewModel.

Syntaxe

attr: <binding-object>

Paramètre

  • L'objet JavaScript doit être passé en tant que paramètre dans lequel le nom de propriété fait référence au nom d'attribut et les valeurs font référence aux valeurs souhaitées à transmettre à l'élément DOM.

  • Plusieurs attributs peuvent également être attribués à la fois. Supposons que vous vouliez attribuer un titre et href une valeur, alors la liaison ressemblera à ce qui suit -

<a data-bind = "attr: { href: courseUrl, title: courseTitle}">

courseUrl et courseTitle les variables auront les valeurs souhaitées dans ViewModel.

  • Si la propriété ViewModel est une valeur observable, l'attribut est attribué en fonction de la nouvelle valeur de paramètre mise à jour. S'il ne s'agit pas d'une valeur observable, l'attribut n'est attribué qu'une seule fois pour la première fois.

Exemple

Jetons un œil à l'exemple suivant qui illustre l'utilisation de la liaison Attr.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS attribute binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <a data-bind = "attr: { href: courseUrl}">
         Click here for free online tutorials and courses.
      </a>

      <script type = "text/javascript">
         function AppViewModel() {
            this.courseUrl = ("http://tutorialspoint.com/");
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans attr-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • CourseUrl attribuera la valeur à l'attribut href dans l'élément HTML DOM.