KnockoutJS - Attr Binding

Questa associazione consente di assegnare dinamicamente elementi HTML attributeutilizzando la proprietà ViewModel. Ad esempio, puoi impostare l'attributo src per un'immagine,title attributo per la pagina HTML o un href per un collegamento nel tag basato sui valori in ViewModel.

Sintassi

attr: <binding-object>

Parametro

  • L'oggetto JavaScript deve essere passato come parametro in cui il nome della proprietà si riferisce al nome dell'attributo e i valori si riferiscono ai valori desiderati da passare all'elemento DOM.

  • È inoltre possibile assegnare più attributi contemporaneamente. Supponiamo che tu voglia assegnare un titolo e href un valore, quindi l'associazione avrà il seguente aspetto:

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

courseUrl e courseTitle le variabili avranno i valori desiderati in ViewModel.

  • Se la proprietà ViewModel è un valore osservabile, l'attributo viene assegnato in base al nuovo valore del parametro aggiornato. Se non è un valore osservabile, l'attributo viene assegnato solo una volta per la prima volta.

Esempio

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato attr-bind.htm file.

  • Apri questo file HTML in un browser.

  • CourseUrl assegnerà il valore all'attributo href nell'elemento HTML DOM.