web-dev-qa-db-ja.com

アンカータグのデータバインドhref属性

アンカー属性をKnockoutJS ViewModelフィールドにバインドしようとしています。私はこのようなものを試しました：

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

しかし、これは機能しません。 html要素の可能なデータバインド値のリストはどこで入手できますか？

javascripthtml5data-bindingknockout.js
40
xwrs

attr バインディングを使用する必要があります。これにより、任意の属性を設定できます。

例えば：

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

ここでは、可能なすべてのバインディングのリストを見つけることができます。

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

左側（サイドバー）には、テキスト、属性スタイルなどの他のバインディングへのリンクがあります。

あなたはこれを行うことができます

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

またはテンプレートを作成します http://knockoutjs.com/documentation/template-binding.html

お役に立てれば

12
dknaack

alternativeto @ RichardFriend's answer （およびより一般的に使用されるオプション）として、カスタムバインディングハンドラを記述して、もう少し簡潔に表示します。

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

これは私に最適です

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