O knockoutjs permite que adicione uma função customizada no core do framework. Primeiro devemos saber que o KO utiliza herança entre algumas funções . Se você adicionar uma nova função em “ko.subscribable”, logo estará disponivel em todas as outras também.
Se você adicionar uma nova função em “ko.observable”, estará disponível em “ko.observableArray” também (mas não estará em “ko.computed”).
Temos condição de adicionar N funções através de:

  • ko.subscribable.fn
  • ko.observable.fn
  • ko.observableArray.fn
  • ko.computed.fn

Assim que você adicionar uma nova função, estrá disponível para utilizar.
Vamos fazer um exemplo simples:

Mostrar primeiro item com filtro
Vamos adicionar uma função em “ko.observableArray” para obter o primeiro item de um filtro que passamos por parâmetro.

ko.observableArray.fn.first = function (expressionFunc) {
    return ko.utils.arrayFirst(this(), expressionFunc);
};

Acima estamos definido que uma nova função chamada “first”. Ela deve filtrar e retornar o primeiro item encontrado, com base na função passada como parâmetro.

Vamos utilizar a função

var ViewModel = function() {
    var self = this;
    self.itens = ko.observableArray([
        {id: 1, nome: "Maria"},
        {id: 2, nome: "José"},
        {id: 3, nome: "João"}
    ]);
    
    self.primeiroItem = self.itens.first(function(item){
        return item.id === 3;
    });
};

ko.applyBindings(new ViewModel());

Acima temos uma classe “ViewModel” com um “observableArray” chamado “itens”. E uma propriedade chamada “primeiroItem” que utiliza a função “first”, passando como parâmetro uma função para buscar pelo “id” 3.

E o html deve ficar assim

<div data-bind="text: primeiroItem.nome"></div>

Veja o exemplo aqui http://jsfiddle.net/andrebtoe/ry8ym47c.

Adicionando uma função para filtra por expressão regular
Vamos adicionar uma função que retorna alguns itens (um array) em vez de um item apenas. A função deve filtrar por uma expressão regular.

ko.observableArray.fn.expression = function (exp, prop) {
    return ko.utils.arrayFilter(this(), function(item){
        var key = item[prop];
        return exp.test(key.toString());
    });
};

Acima estamos adicionando uma função ao “ko.observableArray” chamada “expression”. Deve ser informado por parâmetro a expressão e o nome da propriedade que deve ser filtrada (estou considerando que a propriedade seja de um tipo primitivo).
A classe “ViewModel” deve ficar assim:

var ViewModel = function() {
    var self = this;
    self.itens = ko.observableArray([
        {id: 1, nome: "Maria"},
        {id: 2, nome: "José"},
        {id: 3, nome: "João"}
    ]);
    
    self.itensFiltrados = self.itens.expression(/^J.*/, "nome");
};

ko.applyBindings(new ViewModel());

Acima estamos filtrando os dados do array “itens”, que a propriedade “nome” comece com a letra “J”.
O html deve ficar assim:

<ul data-bind="foreach: itensFiltrados">
    <li data-bind="text: nome"></li>
</ul>

Acima estamos utilizando o “bindle handler” “foreach” para listar os itens de “itensFiltrados”.
Veja o exemplo aqui http://jsfiddle.net/andrebtoe/n5hpc811.

O ideal é que essas funções sejam genéricas. Você deve pensar um pouco antes de adicionar uma nova função. “Será que não vou acoplar muita essa função, e não darei condições de ser reutilizada?”.

Espero ter ajudado!
Até a próxima pessoal!

Publicidade