knockout component with custom element styling

by Leandro Simões

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.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>

CSS

table td, table th {
  border: 1px solid #CCC;
  padding: 5px;
}

JavaScript

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