Une option est de faire quelque chose comme:
<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>
Exemple ici: http://jsfiddle.net/rniemeyer/9DHHh/
Sinon, vous pouvez simplifier votre vue en déplaçant une certaine logique dans votre modèle de vue, par exemple:
<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>
Ensuite, ajouter des méthodes sur votre modèle en vue de retourner la valeur appropriée:
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);
};
};
Exemple ici: http://jsfiddle.net/rniemeyer/9DHHh/1/
http://pastie.org/3334757 Il est mon code, basé sur votre exemple . Mais ça ne marche pas pour moi - ça génère des TD sans contenu à l'intérieur. J'utilise knockout-2.0.0.js – VitalyP
Pouvez-vous fourchette celui-ci? http://jsfiddle.net/rniemeyer/9DHHh/. Je ne vois rien de mal de votre lien pastie. –
Cela fonctionne bien sans conditions - il rend une table sans problèmes, mais avec des conditions, cela ne fonctionne pas. – VitalyP