KnockoutJS если оператор внутри цикла Еогеасп

Вот у меня есть этот код:KnockoutJS если оператор внутри цикла Еогеасп

<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>

Я хотел бы иметь что-то вроде этого (это псевдокод):

<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>

Можно ли написать что-то вроде этого на KnockoutJS?

источник

2012-02-07 VitalyP

Один из вариантов, чтобы сделать что-то вроде:

<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>

образца здесь: http://jsfiddle.net/rniemeyer/9DHHh/

В противном случае вы можете упростить свое представление, переместив некоторую логику в вашу модель просмотра, например:

<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>

Затем добавить методы в вашей модели представления вернуть соответствующее значение:

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); 
    }; 
};

Пример здесь: http://jsfiddle.net/rniemeyer/9DHHh/1/

источник

2012-02-07 14:35:29

http://pastie.org/3334757 Это мой код, основанный на вашем примере , Но это не работает для меня - он генерирует TD без содержимого внутри. Я использую knockout-2.0.0.js – VitalyP

Можете ли вы это сделать? http://jsfiddle.net/rniemeyer/9DHHh/. Я не вижу ничего плохого в твоей ссылке. –

Хорошо работает без условий - он создает таблицу без проблем, но с условиями она не работает. – VitalyP

Вы можете использовать синтаксис потока управления containerless, который основан на комментарий теги:

<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>

источник

2012-02-07 14:27:18

KnockoutJS если оператор внутри цикла Еогеасп

ответ

Смежные вопросы