Làm cách nào để có nhiều thuộc tính liên kết dữ liệu trên một phần tử?

94

Tôi cần có nhiều liên kết dữ liệu trên một phần tử. Ví dụ: tôi muốn một hrefcũng như một htmlliên kết dữ liệu trên một a thẻ. Tôi đã thử cái này,

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

Nhưng điều này không hiệu quả. Có vẻ như loại trực tiếp chỉ hỗ trợ ràng buộc một thuộc data-bind tính? Làm cách nào để liên kết cả thuộc tính, thuộc tính hrefbên trong htmlvà "" tùy chỉnh data-proptrên một phần tử?

javascript jquery knockout.js

— người dùng960567
nguồn

127

Như thế này:

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

Bạn sử dụng các ràng buộc được phân tách bằng dấu phẩy - thuộc tính giống như việc truyền một đối tượng:

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

Hoặc, nếu bạn đang hỏi về nhiều attrràng buộc cùng một lúc:

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

— paulslater19
nguồn

Bạn cũng có thể nói với tôi rằng, nếu viewModel.tasks = ko.observableArray (tsks) sau đó thay đổi viewModel.tasks = [mảng mới], Làm thế nào để nói với gõ mảng được thay đổi

— user960567

khi thiết lập một giá trị ko.observable, hãy thử làm việc đó như thế này: viewModel.tasks([1,2,3]);. Tức là bạn gọi nó như là một chức năng, đi qua các giá trị mới như một tham số

— paulslater19

2

Đây là cách tôi triển khai thuộc tính nguồn và sự kiện nhấp chuột bằng cách sử dụng data-bind. Bạn có thể thấy nó hữu ích.

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

— aamir sajjad
nguồn

1

Tôi chỉ đơn giản sử dụng:

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

cho một phần tử hộp kiểm.

— chris
nguồn

1

bạn có thể sử dụng nhiều thuộc tính bằng cách sử dụng , như bên dưới

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

đối tượng như thế này

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

— Surendra Kumar Ahir
nguồn