Knockout.js: có điều kiện ràng buộc thuộc tính tiêu đề của div

Question

Tôi có chế độ xemMô hình trên trang của tôi chứa dữ liệu để biết tổng quan về trạng thái hiện tại của một số thiết bị. Cho đến nay mọi thứ hoạt động tốt ngoại trừ một vấn đề: tôi cần đặt thuộc tính tiêu đề của phần tử div tùy thuộc vào một giá trị khác trong viewModel của tôi.

Tôi biết rằng về cơ bản bạn có thể thiết lập các thuộc tính tiêu đề như thế này (trong thuộc tính dữ liệu ràng buộc của thẻ div):

attr: { title: 'Some title' } 

Sử dụng tuyên bố trên, "Một số danh hiệu" được thiết lập như là tooltip khi lơ lửng div. Tôi cũng có thể thiết lập này:

attr: { title: ConnectState.Value() } 

và nó sẽ tạo ra giá trị đúng (một giá trị số nguyên) của dữ liệu ViewModel hiện tại của tôi, vì vậy các ViewModel được dân cư một cách chính xác.

Bây giờ tôi cần phải thay đổi điều này để một cái gì đó như thế:

attr: { 
    title: { 
    'Text 1': ConnectState.Value() == 0, 
    'Text 2': ConnectState.Value() == 1, 
    'Text 3': ConnectState.Value() == 2, 
    'Text 4': ConnectState.Value() == 3 
    } 
} 

Ví dụ trên sẽ chỉ cung cấp "[đối tượng Object]" như tiêu đề (resp như tooltip.). Lam sao tôi co thể sửa no? Cảm ơn rất nhiều trước!

Answer 1

Xác định ko.computed trong chế độ xem của bạn.

self.ConnectTitle = ko.computed(function() { 
    return 'Text ' + (self.ConnectState.Value() + 1).toString(); 
}); 

Sau đó: -

attr: { title: ConnectTitle } 

Như ràng buộc của bạn. Bạn có thể thay thế các nội dung của hàm được tính toán bằng một cái gì đó sẽ phù hợp với nhu cầu của bạn, nếu văn bản của bạn chỉ là một ví dụ đơn giản.

Answer 2

Bạn có thể sử dụng toán tử tam phân, một cái gì đó như thế này:

attr: { 
    title: ConnectState.Value() == 0 ? 'Text 1' : 
     ConnectState.Value() == 1 ? 'Text 2' : 
     ConnectState.Value() == 2 ? 'Text 3' : 
     'Text 4' 
}