ค้นหาเว็บไซต์

javascript - ซ่อนแถวตารางด้วยการผูกสไตล์ knockout


ฉันต้องการผูกสไตล์การแสดงผลของแถวตารางกับคุณสมบัติของ viewmodel โดยใช้ knockout.js ฉันต้องใช้การผูกข้อมูลนี้ เพราะฉันต้องการซ่อนหรือแสดงแถวตารางขึ้นอยู่กับคุณสมบัติอื่น ๆ ใน viewmodel ของฉัน

ตัวอย่างโค้ด HTML:

<tr data-bind="style: myProperty">
    Test
</tr>

มุมมองโมเดล:

this.myProperty = ko.computed(() => {
    return "{ display: none }";
});

แต่นี่ใช้ไม่ได้ สมบัติถูกป้อนหลังจากโหลดหน้าเพจ แต่แถวของตารางยังคงแสดงอยู่ มีวิธีอื่นในการทำสิ่งนี้หรือว่าฉันลืมอะไรไปหรือเปล่า?

คำตอบ #1

คุณควรใช้การผูกพันแบบ "visible" แทน รายละเอียดเพิ่มเติมที่นี่

ตัวอย่างของคุณอาจดูเหมือน:

<tr data-bind="visible: myProperty">
    Test
</tr>

คำตอบ #2

ขอบคุณสำหรับความช่วยเหลือของคุณ ฉันได้พบวิธีแก้ปัญหาอีกวิธีหนึ่งแล้ว:

ตามเอกสารที่ http://knockoutjs.com/documentation/style-binding.html ฉันตั้งค่า style ตอนนี้ด้วยวิธีนี้:

<tr data-bind="style: { display: !TrueOrFalseProperty() ? 'none' : 'inline' }">
   Test
</tr>

นี่ใช้ได้