KnockoutJS - Attr Binding

Este enlace le permite asignar elementos HTML dinámicamente attributeusando la propiedad ViewModel. Por ejemplo, puede establecer el atributo src para una imagen,title atributo para la página HTML, o un href para un enlace en la etiqueta basado en valores en ViewModel.

Sintaxis

attr: <binding-object>

Parámetro

El objeto JavaScript debe pasarse como un parámetro en el que el nombre de la propiedad se refiere al nombre del atributo y los valores se refieren a los valores deseados que se pasarán al elemento DOM.
También se pueden asignar varios atributos a la vez. Suponga que desea asignar un título y un valor href, entonces el enlace se verá así:

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

courseUrl y courseTitle las variables tendrán los valores deseados en ViewModel.

Si la propiedad ViewModel es un valor observable, entonces el atributo se asigna según el nuevo valor de parámetro actualizado. Si no es un valor observable, el atributo se asigna solo una vez por primera vez.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en attr-bind.htm archivo.
Abra este archivo HTML en un navegador.
CourseUrl asignará el valor al atributo href en el elemento DOM de HTML.

↰ Previous page