Una opción es hacer algo como:
<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>
Muestra aquí: http://jsfiddle.net/rniemeyer/9DHHh/
De lo contrario, puede simplificar su vista moviendo un poco de lógica en su modelo de vista como:
<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>
A continuación, añadir los métodos del modelo de fin de devolver el valor adecuado:
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);
};
};
Muestra aquí: http://jsfiddle.net/rniemeyer/9DHHh/1/
http://pastie.org/3334757 Es mi código, basado en su ejemplo . Pero no funciona para mí, genera TD sin contenido dentro. Yo uso knockout-2.0.0.js – VitalyP
¿Puedes usar este? http://jsfiddle.net/rniemeyer/9DHHh/. No veo nada malo en tu enlace de pastie. –
Funciona bien sin condiciones - presenta una tabla sin problemas, pero con condiciones no funciona. – VitalyP