knockout.js - else - knockoutjs variables

KnockoutJS if statement dentro de foreach loop

Question

Aquí tengo este código:

<tbody data-bind="foreach: entries">
<tr>
<td><i class="icon-file"></i> <a href="#" data-bind="text: name, click: $parent.goToPath"></a></td>
</tr>
</tbody>

Me gustaría tener algo así (es un pseudocódigo):

<tbody data-bind="foreach: entries">
<tr>
<td><i class="{{ if type == ''file'' }} icon-file {{/if}}{{else}} icon-folder {{/else}}"></i> <a href="#" data-bind="text: name, click: {{ if type == ''file'' }} $parent.showFile {{/if}}{{else}} $parent.goToPath {{/else}}"></a></td>
</tr>
</tbody>

¿Es posible escribir algo como esto en KnockoutJS?

Answer 1

Puede usar la sintaxis de flujo de control sin contenedor, que se basa en etiquetas de comentario:

<tbody data-bind="foreach: entries">
<tr>
<!-- ko if: type === "file" -->
<td><i class="icon-file"></i> <a href="#" data-bind="text: name, click: $parent.showFile"></a></td>
<!-- /ko -->
<!-- ko if: type !== "file" -->
<td><i class="icon-folder"></i> <a href="#" data-bind="text: name, click: $parent.goToPath"></a></td>
<!-- /ko -->
</tr>
</tbody>

Answer 2

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>

Luego, agregue métodos en su modelo de vista para devolver el valor apropiado:

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/