2

Tenho o seguinte código utilizando Ajax para buscar os dados em um Restful e carregando os campos em um array ListaUsuarios com knockout:

  $.ajax({
    type: "GET",
    url: "http://192.168.15.4/api/usuarios",
    contentType: "application/javascript",
    dataType: "json",
    beforeSend: function () {
        $('#imageLoad').show();
        $('#imageError').hide();
    },
    success: function (result) {
        var observableData = ko.mapping.fromJS(result);
        var array = observableData();
        self.ListaUsuarios(array);

        // Method to filter the assets table based on user input.  Computed observable is throttled to ensure it doesn't kick in too quickly.
        self.filteredAssets = ko.computed(function () {
            debugger;
            var filter = self.filter();
            if (!filter) {
                return self.ListaUsuarios();
            } else {
                return ko.utils.arrayFilter(self.ListaUsuarios(), function (item) {
                    return item.login().indexOf(filter) > -1;
                });
            }
        }).extend({
            throttle: 500
        });
        self.selectedAsset = ko.observable();
        self.selectAsset = function (item) {
            self.selectedAsset(item);
        };
    })

Feito isso carrego uma table na página html usando o array ListaUsuarios carregado anteriormente com o mapping do knockout, especificando os campos que eu desejo.

  <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th align=center width=60 style="display: none">Código</th>
                <th>Nome/Razão social</th>
                <th>Login</th>
                <th>CPF/CNPJ</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: {data: ListaUsuarios()}">
            <tr>
                <td style="display: none" data-bind="text: id"></td>
                <td data-bind="text: pessoa.razao_social"></td>
                <td data-bind="text: login"></td>
                <td data-bind="text: pessoa.cpf_cnpj"></td>
                <td data-bind="text: email"></td>
            </tr>
        </tbody>
    </table>

Esse código funciona perfeitamente. Mas queria criar um template (componente) com essa table para que não precisasse repetir o código para cada table diferente que eu tivesse, por exemplo a table seria só:

 <tbody data-bind="foreach: {data: ListaUsuarios()}">
      <tr>
         //aqui a table seria criada dinamicamente atraves do componente com template criado no knockout.
      </tr>
 </tbody>

O resto ficaria a cargo do componente que carrega o template, tentei fazer isso usando alguns exemplos como por exemplo : http://jsfiddle.net/mbest/pfmk1k2e/ mas sem sucesso

o json recebido é:

[{"pessoa":{"id":1,"tipo":"J","razao_social":"INTELIDER","nome_fantasia":"INTELIDER LTDA","cpf_cnpj":"10999558000186","rg_insc_estadual":"132456789"},"id":1,"login":"gleyson","senha":"123456","email":"[email protected]","ativo":"S"},{"pessoa":{"id":11,"tipo":"J","razao_social":"I9MAKER LTDA","nome_fantasia":"INTELIDER LTDA","cpf_cnpj":"00000000000000","rg_insc_estadual":"123456"},"id":11,"login":"sistemas","senha":"123456","email":"[email protected]","ativo":"S"}]"

1 Resposta 1

3

Por algum motivo os componentes do knockout não funcionam dentro de uma table sem ser através da utilização da feature de "virtual elements". Sendo assim, fiz este jsFiddle para exemplificar como ficaria no seu caso a utilização. Utilizei os dados do JSON que você forneceu na pergunta.

Espero ter ajudado!

Edit: Adicionado código na resposta

ko.components.register('user-component', {
    viewModel: function(params) {
    	  debugger;
        this.id = params.id;
        this.login = params.login;
        this.pessoa = params.pessoa;
        this.email = params.email;
    },
    template:
        '<td data-bind="text: id"></td>' +
        '<td data-bind="text: pessoa.razao_social"></td>' +
        '<td data-bind="text: login"></td>' +
        '<td data-bind="text: pessoa.cpf_cnpj"></td>' +
        '<td data-bind="text: email"></td>'
});

function Product(name, rating) {
    this.name = name;
    this.userRating = ko.observable(rating || null);
};

function MyViewModel() {
    this.products = ko.observableArray([
    	{
      	"pessoa":{
        	"id":1,
          "tipo":"J",
          "razao_social":
          "INTELIDER",
          "nome_fantasia":"INTELIDER LTDA",          
          "cpf_cnpj":"10999558000186",
          "rg_insc_estadual":"132456789"
        },
        "id":1,
        "login":"gleyson",
        "senha":"123456",
        "email":"[email protected]",
        "ativo":"S"
      },
      {
        "pessoa":{
        	"id":11,
          "tipo":"J",
          "razao_social":"I9MAKER LTDA",
          "nome_fantasia":"INTELIDER LTDA",
          "cpf_cnpj":"00000000000000",
          "rg_insc_estadual":"123456"
        },
        "id":11,
        "login":"sistemas",
        "senha":"123456",
        "email":"[email protected]",
        "ativo":"S"
        }
    ]);
}
 
ko.applyBindings(new MyViewModel());
table td, table th {
  border: 1px solid #CCC;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
  <tr>
    <th>ID</th>
    <th>RAZÃO SOCIAL</th>
    <th>LOGIN</th>
    <th>CPF/CNPJ</th>
    <th>EMAIL</th>
  </tr>
</thead>
<tbody data-bind="foreach: products">
  <tr>
    <!-- ko component: { name:"user-component", params: $data } --><!-- /ko -->
  </tr>
</tbody>
</table>

5
  • valeu pela ajuda irmão! Commented 14/08/2017 às 13:04
  • Opa, que bom que ajudou, qualquer dúvida estou a disposição! Abraço! Commented 14/08/2017 às 13:09
  • Opa Leandro, seria legal se tu colocasse teu código aqui no StackOverflow, assim caso o link quebre algum dia a resposta ainda continua ajudando pessoas. Mesmo assim mantenha o link do jsFiddle pras pessoas conseguir editar...
    – KaduAmaral
    Commented 14/08/2017 às 13:19
  • Ah blz @KaduAmaral, vou editar e colocar já. Valeu pela dica! Commented 16/08/2017 às 13:28
  • Prontinho @KaduAmaral .. valeu pela dica novamente. Commented 16/08/2017 às 13:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .