Một lựa chọn là để làm một cái gì đó như:
<tbody data-bind="foreach: entries">
<tr>
<td>
<!-- ko if: type === 'file' -->
<i class="icon-file"></i>
<a href="#" data-bind="text: name, click: $parent.showFile"></a>
<!-- /ko -->
<!-- ko if: type !== 'file' -->
<i class="icon-folder"></i>
<a href="#" data-bind="text: name, click: $parent.goToPath"></a>
<!-- /ko -->
</td>
</tr>
</tbody>
mẫu ở đây: http://jsfiddle.net/rniemeyer/9DHHh/
Nếu không, bạn có thể đơn giản hóa chế độ xem của mình bằng cách di chuyển một số logic vào kiểu xem của bạn như:
<tbody data-bind="foreach: entries">
<tr>
<td>
<i data-bind="attr: { 'class': $parent.getClass($data) }"></i>
<a href="#" data-bind="text: name, click: $parent.getHandler($data)"></a>
</td>
</tr>
</tbody>
Sau đó, thêm các phương pháp trên mô hình quan điểm của bạn để trả về giá trị thích hợp:
var ViewModel = function() {
var self = this;
this.entries = [
{ name: "one", type: 'file' },
{ name: "two", type: 'folder' },
{ name: "three", type: 'file'}
];
this.getHandler = function(entry) {
console.log(entry);
return entry.type === 'file' ? self.showFile : self.goToPath;
};
this.getClass = function(entry) {
return entry.type === 'file' ? 'icon-file' : 'icon-filder';
};
this.showFile = function(file) {
alert("show file: " + file.name);
};
this.goToPath = function(path) {
alert("go to path: " + path.name);
};
};
mẫu ở đây: http://jsfiddle.net/rniemeyer/9DHHh/1/
Nguồn
2012-02-07 14:35:29
http://pastie.org/3334757 Nó mã của tôi, dựa trên ví dụ của bạn . Nhưng nó không hiệu quả đối với tôi - nó tạo ra TD mà không có nội dung bên trong. Tôi sử dụng knockout-2.0.0.js – VitalyP
Bạn có thể ngã ba cái này không? http://jsfiddle.net/rniemeyer/9DHHh/. Tôi không thấy bất cứ điều gì sai trái từ liên kết pastie của bạn. –
Nó hoạt động tốt mà không có điều kiện - nó ám một bảng không có vấn đề, nhưng với điều kiện nó không hoạt động. – VitalyP