จะมีแอตทริบิวต์การผูกข้อมูลหลายรายการในองค์ประกอบเดียวได้อย่างไร


96

ฉันต้องมีการเชื่อมโยงข้อมูลหลายรายการในองค์ประกอบเดียว ตัวอย่างเช่นผมต้องการhrefเช่นเดียวกับhtmlข้อมูลที่มีผลผูกพันกับหนึ่ง aแท็ก ฉันได้ลองสิ่งนี้แล้ว

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

แต่ไม่ได้ผล ดูเหมือนว่าสิ่งที่น่าพิศวงสนับสนุนเฉพาะผูกพันหนึ่ง data-bindทรัพย์สิน? วิธีการรวมแอตทริบิวต์ "" hrefภายในhtmlและ "" ที่กำหนดเองdata-propไว้ในองค์ประกอบเดียว

คำตอบ:


129

แบบนี้:

<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 }">

คุณช่วยบอกฉันได้ไหมว่าถ้า viewModel.tasks = ko.observableArray (tsks) แล้วเปลี่ยน viewModel.tasks = [อาร์เรย์ใหม่] จะบอกได้อย่างไรว่าการเคาะอาร์เรย์มีการเปลี่ยนแปลง
user960567

เมื่อตั้งค่า ko.observable viewModel.tasks([1,2,3]);ลองทำเช่นนี้ คือคุณเรียกมันว่าเป็นฟังก์ชันโดยส่งค่าใหม่เป็นพารามิเตอร์
paulslater19

2

นี่คือวิธีที่ฉันใช้งานแอตทริบิวต์ต้นทางและเหตุการณ์การคลิกโดยใช้ data-bind คุณอาจพบว่ามีประโยชน์

<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' }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.