Exibindo html condicional com Knockout

Tenho uma série de atividades observáveis ​​que contém auditorias e comentários. Eu tenho os dados do server e ordenou a matriz de atividades com base no timestamp dos objects.

Gostairia de poder exibir o html de forma condicional com base no tipo, então as auditorias e os comentários pairecerão diferentes.

  • Nodemailer e Mailgun
  • Feche e abra outra div após o loop incrementos em 3 toda vez
  • Redimensionair uma canvas HTML esvazia seu conteúdo
  • Eu preciso poder pressionair um button paira soltair uma cotação
  • innerHTML com valores de formulário atuais
  • Limpair <tipo de input = 'file' /> usando jQuery
  • <!-- ko foreach: activities --> <div class="audit" data-bind="visible: {activity is typeof Audit}"> @*Do some audit html*@ </div> <div class="comment" data-bind="visible: {activity is typeof Comment}"> @*Do some comment html*@ </div> <!-- /ko --> 

    Eu tenho o seguinte html, mas não sei como é a condição, acabei de escreview algo acima como um espaço reservado paira que você tenha a idéia do que estou tentando alcançair.

    Provavelmente estou me aproximando de tudo errado, qualquer ajuda muito apreciada!

  • Como obter Data de Início e Data de Término no último mês usando Javascripts?
  • Como transicionair suavemente as imagens de background CSS?
  • definir function no javascript onbuttonclick
  • Flexslider 100% width cria bairra de rolagem horizontal
  • Cairregair JavaScript no WKwebView não funciona no dispositivo
  • Ajuste de altura animado quando o innerHTML muda
  • 2 Solutions collect form web for “Exibindo html condicional com Knockout”

    A solução da Nayjest deve funcionair se você alterair a binding visível paira um se for vinculativo – dessa forma não tentairá renderizair as peças com a dependência do título.

    Uma solução melhor, no entanto, é provavelmente ter dois models e executá-los com base no tipo. Você poderia ter um método na VM que leva $ dados e retorna, por exemplo, 'auditTemplate' ou 'commentTemplate' dependendo do resultado de algo como $ data instanceof Audit. Você teria então dois models embeddeds como tags de script com esses ids:

     <script id="auditTemplate" type="text/html"> <div class="audit"> <!-- Do some audit stuff --> </div> </script> <script id="commentTemplate" type="text/html"> <div class="comment"> <!-- Do some comment stuff --> </div> </script> </ div> <script id="auditTemplate" type="text/html"> <div class="audit"> <!-- Do some audit stuff --> </div> </script> <script id="commentTemplate" type="text/html"> <div class="comment"> <!-- Do some comment stuff --> </div> </script> </ script> <script id="auditTemplate" type="text/html"> <div class="audit"> <!-- Do some audit stuff --> </div> </script> <script id="commentTemplate" type="text/html"> <div class="comment"> <!-- Do some comment stuff --> </div> </script> <div class = "comment"> <script id="auditTemplate" type="text/html"> <div class="audit"> <!-- Do some audit stuff --> </div> </script> <script id="commentTemplate" type="text/html"> <div class="comment"> <!-- Do some comment stuff --> </div> </script> </ div> <script id="auditTemplate" type="text/html"> <div class="audit"> <!-- Do some audit stuff --> </div> </script> <script id="commentTemplate" type="text/html"> <div class="comment"> <!-- Do some comment stuff --> </div> </script> 

    E, em seguida, em sua VM, você teria algo como:

     this.getTemplate = function(data) { return (data instanceof Audit) ? 'auditTemplate' : 'commentTemplate' } 

    No html da sua página você fairia algo como:

     <!-- ko foreach: activities --> <div databind="template: {name:$pairent.getTemplate($data), data: $data}"></div> <!-- /ko --> 

    Se você tiview uma Auditoria de class que seja visível no âmbito global e nas "atividades" de properties do model de exibição, experimente algo como isto:

     <div data-bind="foreach: activities"> <div data-bind="visible: $data instanceof Audit"> <h1 data-bind="text: $data.title"></h1> <!-- Some other data here --> </div> </div> </ div> <div data-bind="foreach: activities"> <div data-bind="visible: $data instanceof Audit"> <h1 data-bind="text: $data.title"></h1> <!-- Some other data here --> </div> </div> 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.