1つの要素に複数のデータバインド属性を設定するにはどうすればよいですか？

94

1つの要素に複数のデータバインディングが必要です。たとえば、1つのタグにデータバインディングhrefだけでなくも必要です。私はこれを試しました、html a

<a data-bind="html: name" 
   data-bind="attr: { href: url }" 
   data-bind="attr: { 'data-prop': xyz }">
</a>

しかし、これは機能しません。ノックアウトは1つの data-bindプロパティのバインドのみをサポートしているようですか？1つの要素hrefに、内部html、およびカスタム " data-prop"属性の両方をバインドする方法は？

javascript jquery knockout.js

— user960567
ソース

127

このような：

<a data-bind="html: name, attr: { href: url }">

カンマ区切りのバインディングを使用します。属性はオブジェクトを渡すのと同じです。

{
    html: name, 
    attr: { href: url }
}

または、attr一度に複数のバインディングについて尋ねる場合：

<a data-bind="html: name, attr: { href: url, 'data-prop': FullName }">

— paulslater19
ソース

また、viewModel.tasks = ko.observableArray（tsks）の場合、viewModel.tasks = [new Array]を変更すると、配列が変更されたことを確認する方法を教えてください

— user960567 '22

ko.observable値を設定するときは、次のようにしてみてくださいviewModel.tasks([1,2,3]);。つまり、関数として呼び出し、新しい値をパラメータとして渡します

— paulslater19

2

これは、データバインドを使用してソース属性とクリックイベントを実装した方法です。あなたはそれが役に立つかもしれません。

<img data-bind="{click: function(data, event) {ESVendorWidget.loadFunction(data,event)},
                 attr: {src: $data.Photo.PhotoUrl }}"
     alt="package pic" class="big" />

— アーミル・サジャード
ソース

1

私は単に使用します：

<input type="checkbox"
    data-bind="click: callFunction(), checkedValue: 0, checked: Card.Days">

チェックボックス要素用。

— クリス
ソース

1

, 以下のように複数のプロパティを使用できます

<a data-bind="attr: { href: url, id: id , class: classvalue}">

このようなオブジェクト

{ url: 'http://stackoverflow.com', id:'newid' , classvalue: 'classname' }

— スレンドラクマールアヒル
ソース