terça-feira, 11 de julho de 2017
Knockout.js currency formatter.
Aqui trabalhando com knockout.js, criando um custom binding para manter os valores de inputs em formato de Moeda.
quinta-feira, 9 de fevereiro de 2017
Atualizando Select com Knockout.js
Utilizando knockout.js como atualizar a lista de um select à partir da escolha em outro select? Pra muitos pode ser simples de cara, mas vou adimitir: para mim não foi, fui complicando às coisas ao invés de simplificar, quebrei um pouco a cabeça com isso e não tive bons resultados. Até que, lendo um post de um blog que falava sobre observables computed me veio a iluminação! E resolvi partilhar vai que ajudo alguém.
Suponhamos uma aplicação na qual serão escolhidos items, estes itens estão organizados em categorias. Em uma lista seleciono a categoria, e à partir da minha seleção uma segunda lista é abastecida com as opções daquela categoria. Vou ser sincero, Pra começar vejamos uns dados de exemplo:
var produtos = [ { grupo:"higiene pessoal", itens:[{'nome':'creme dental','valor':6.95}, {'nome':'shampoo','valor':12.49}] }, { grupo:"material de limpeza", itens:[{'nome':'sabão em pó 2kg','valor':13.80}, {'nome':'detergente 500ml','valor':2.80}] }, { grupo:"padaria", itens:[{'nome':'biscoito de polvilho 500g','valor':4.5}, {'nome':'pão de forma integral','valor':8.35}] } ];A seguir nosso html:
<label>Categoria:</label><select data-bind="options:produtos,
optionsText:'grupo',
value:categoriaEscolhida,
optionsCaption:'categoria...'"></select>
<label>Produto:</label><select data-bind="options:itens,
optionsText:'nome',
value:itenEscolhido,
optionsCaption:'Escolha o item'"></select>
E por último nosso código javascript:
var MarketModel = function(){ this.produtos = ko.observableArray(produtos); this.categoriaEscolhida = ko.observable(this.produtos()[0]); this.itens = ko.computed(function(){ return this.categoriaEscolhida().itens; },this); };A mágica acontece no observable do tipo computed. Resumidamente, pois a documentação é muito clara, computed é um campo calculado que sempre será atualizado quando as variáveis observáveis das quais ele depende forem atualizadas.Assim, toda vez que categoriaEscolhida for atualizada, itens também será. Simples assim.
Assinar:
Postagens (Atom)