web-dev-qa-db-fra.com

Attribut href de liaison de données pour la balise d'ancrage

J'essaie de lier les attributs d'ancrage à un champ KnockoutJS ViewModel. J'ai essayé quelque chose comme ça:

<a data-bind="href: Link, value: Title"></a>

mais ça ne marche pas. Où puis-je obtenir une liste des valeurs possibles de liaison de données pour les éléments HTML?

javascripthtml5data-bindingknockout.js
40
xwrs

Vous devez utiliser la liaison attr , cela vous permet de définir n'importe quel attribut.

Par exemple:

<a data-bind="attr: { href: Link, title: Title }, text: Title">xxx</a>
95
Richard Friend

Ici vous pouvez trouver une liste de toutes les liaisons possibles.

http://knockoutjs.com/documentation/value-binding.html

sur le côté gauche (barre latérale), vous trouverez des liens vers d'autres liaisons, telles que du texte, un style attr, etc.

Tu peux le faire 

attr: { href: Link}, text: Title comme xwrscommented

ou créer un modèle http://knockoutjs.com/documentation/template-binding.html

j'espère que cela t'aides

12
dknaack

En tant que alternative à @ RichardFriend's answer (et l'option plus couramment utilisée), vous pouvez écrire un gestionnaire de liaison personnalisé pour rendre vos vues un peu plus concises:

ko.bindingHandlers['href'] = {
  update: function(element, valueAccessor) {
    element.href = ko.utils.unwrapObservable(valueAccessor());
  }
};

ko.applyBindings({
  myUrl: 'http://stackoverflow.com',
  myText: 'Stack Overflow website'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<a data-bind="href: myUrl, text: myText"></a>

1
Jeroen

Cela fonctionne parfaitement pour moi 

            <td class="CommandArea" rowspan="2">
            <p><a href='#' data-bind="click: abandon" >Abandon</a></p>
            </td>
0
MarlinG