jquery-viewjs

jquery-viewjs é um plugin jQuery projetado para separar a codificação HTML do JavaScript, proporcionando uma maneira eficiente de renderizar e manipular HTML e atributos através de métodos flexíveis e reutilizáveis.

🚀 Instalação

Você pode instalar jquery-viewjs usando npm:

npm install jquery-viewjs

Outra alternativa, inclua o jQuery no seu projeto (caso ainda não tenha):

<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>

Em seguida, adicione o arquivo JavaScript do plugin jquery-viewjs:

<script src="path/to/jquery-viewjs.js"></script>

Dependência: Este plugin depende do jQuery.

🔧 Uso Básico

Uma vez incluído, o plugin adiciona novos métodos ao jQuery, que podem ser usados diretamente em qualquer elemento HTML selecionado. Simplificando a utilização das funcionalidades do jQuery $.html, $.val, $.css entre outras.

📜 Métodos

O plugin oferece os seguintes métodos para manipulação de dados e renderização:

1. assign

Atribui valores em um elemento selecionado via jQuery.

$('#scope').view('assign', { 
    key1: 'value1', 
    key2: 'value2' 
});

2. extract

Extrai dados de um elemento jquery, baseado no objeto fornecido como parâmetro.

var myExtractedValues = $('#scope').view('extract', { 
    key1: 'value1', 
    key2: 'value2' 
});

3. iterate

Faz um loop em uma coleção de dados e atribui os valores de cada objeto clonando um novo template e adicionando eo elemento jQuery.

$('#scope').view('iterate', {
  // Template para clonagem
  template: $('.template-area .my-template'), 
  // Coleção de dados
  collection: [ /* Array de objetos */ ], 
  // Chamada antes de renderizar 
  callbackBeforeItem: function($tpl, obj) {}, 
  // Chamada após renderizar
  callbackItem: function($tpl, obj) {}, 
  // Limpa o elemento jQuery antes de iniciar
  cleanBeforeInit: true, 
  // Método utilizado para inserir o elemento 'append' ou 'prepend'
  methodInsert: 'append',
  // Ordena a coleção pelo nome do campo informado 
  sortBy: 'nomeDoCampo'
});

4. extractCollection

Faz um loop em um elemento jQuery procurando pelo seletor informado e extrai os dados de cada elemento formando uma coleção de dados.

$('#example').view('extractCollection', {
  // Objeto json com o formato de dados a serem extraídos
  valueObject: {key1:null,key2:null}, 
  // String com o seletor utilizado para encontrar cada trecho a ser extraído 
  selector: '.my-selector-class', 
  // Chamada após a extração dos dados de um elemento 
  callbackItem: function($tpl, obj) {} 
});

5. unreplace

Restaura o conteúdo original do elemento, desfazendo a substituição realizada pelo plugin após ter sido utilizado um caso de replace.

$('#example').view('unreplace');

Execução no javascript

//Para a execução no javascript as chamadas serão similares como a seguir
$('meuSeletorDeObjeto').view('minhaAcao',meuObjetoParaAplicar)

• meuSeletorDeObjeto - é o seletor utilizado normalmente pelo jQuery para determinar um escopo da página html.
• minhaAcao - é o que o plugin executará no elemento jquery selecionado.
  • assign - renderiza um objeto no elemento jquery.
  • iterate - renderiza uma coleção de objetos no elemento jquery.
  • extract - extrai os valores do elemento jquery e retorna um objeto preenchido.
  • extractCollection - extrai uma coleção de objetos do elemento jquery
• meuObjetoParaAplicar - é um objeto qualquer com valores que deva ser apresentado no html

Configuração no html

Para o funcionamento você deverá adicionar no seu escopo html alguns atributos nos locais desejados.

• Para incluir um texto adicione ao elemento um atributo iniciando com data-html- seguido com o nome do atributo desejado, isto irá executar
  • data-html-nomeAtributo
• Para definir o valor de um input adicione ao elemento um atributo iniciando com data-val- seguido com o nome do atributo desejado
  • data-val-nomeAtributo
• Para criar ou definir o valor de atributo no elemento adicione ao elemento um atributo iniciando com data-attr- seguido com o nome do atributo desejado
  • data-attr-nomeAtributo
• Para atualizar um trecho do valor de um atributo no elemento adicione um atributo iniciando com data-replace- seguido com o nome do atributo desejado.
  • data-replace-nomeAtributo

📦 Exemplo prático do método 'assign'

Javascript:

//Vamos renderizar o objeto abaixo na página
var myObject = {
    idHero:338,
    heroName:'Yami Sukehiro',
    heroAge:28,
    page:'Yami_Sukehiro'
}
//Para executar a renderização de um objeto faça como a seguir
$('#example').view('assign', myObject);

Isto irá selecionar o elemento html com id 'exemple', e irá renderizar o objeto myObject declarado anteriormente.

HTML:

<div id="example" data-attr-idHero="data-idHero">
    <div>
        <label>Name</label>
        <span data-html-name ><span>
    </div>
    <div>
        <label>Age</label>
        <input type="text" data-html-age >
    </div>
    <a href="https://en.wikipedia.org/wiki/{page}" data-replace-page="href" >Wiki hero</a>
</div>

Resultado HTML:

<div id="example" data-attr-idHero="data-idHero" data-idHero="338">
    <div>
        <label>Name</label>
        <span data-html-name >Jhonn Smith<span>
    </div>
    <div>
        <label>Age</label>
        <input type="text" data-html-age value="22">
    </div>
    <a href="https://en.wikipedia.org/wiki/Yami_Sukehiro" data-replace-page="href" >Wiki hero</a>
</div>

Onde havia data-attr-idHero foi criado um novo atributo com o nome data-idHero por sua vez com o valor 338 que estava no objeto.

• Algo como: $('[data-attr-idHero]').attr('data-idHero',myObject.idHero)

Onde havia data-html-name foi atribuído no html o valor do de myObject.name

• Algo como: $('[data-html-name]').html(myObject.idHero)

Onde havia data-val-age foi atribuído no html o valor do de myObject.age

• Algo como: $('[data-val-age]').val(myObject.age)

📦 Exemplo prático do método 'extract'

HTML:

<div id='escope'>
    <div data-id="99871">
        <label>Name</label>
        <span data-html-name >Cicero</span>
    </div>
    <div>
        <label>Phone</label>
        <span data-html-phone >+55 (61) 99962-6262</span>
    </div>
    <div>
        <label>Age</label>
        <span data-html-age >36</span>
    </div>
    <div>
        <label>Favorite color</label>
        <input type="text" data-val-favoriteColor value="red">
    </div>
    <div>
        <label>Drink</label>
        <select data-val-drink >
            <option value="1">Cofee</option>
            <option value="2" checked="checked">Tea</option>
        </select>
    </div>
</div>

Javascript:

var readVar = $('#escope').view('extract',{
    name:null,
    phone:null,
    age:null,
    favoriteColor:null,
    drink:null
});
console.log(readVar);

Saída

{
    name:'Cicero',
    phone:'+55 (61) 99962-6262',
    age:'36',
    favoriteColor:'red',
    drink:'2'
}

📦 Exemplo prático do método 'iterate'

O método iterate irá executar na prática um loop clonando o template e aplicando o método 'assign' em cada item da coleção para cada clonagem do template passado.

Javascript:

var myCollection = [
    {id:3,name:'Cicero',phone:'999626262',age:'36',usercolor:'red'},
    {id:2,name:'Nero',phone:'88551321',age:'28',usercolor:'blue'},
    {id:7,name:'Cezar',phone:'655123321',age:'32',usercolor:'gray'},
    {id:1,name:'Caligula',phone:'551232423',age:'48',usercolor:'green'},
];
$('.myCombo').view('iterate',{
    template:$('<option data-val-id data-html-name >'),
    collection: myCollection,
    sortBy: 'name'
});
$('.myList').view('iterate',{
    template:$('.templates .item-list'),
    collection: myCollection,
    sortBy: 'age'
});
$('.myTable').view('iterate',{
    template:$('.templates .item-table'),
    collection: myCollection,
    sortBy: 'id'
});

HTML:

<!-- templates é um trecho da tela que pode ficar escondido para ser clonado -->
 <div class="templates" style="display:none">
    <ul>
        <li class="item-list">
            <span data-html-name></span> (<span data-html-age></span>)
        <li>
    </ul>
    <table>
        <tr data-attr-id="data-id" class="item-table">
            <td data-html-id ></td>
            <td ><input type="text" data-val-name  data-css-usercolor="color" /></td>
            <td data-html-age ></td>
            <td><a href="javascript:alert('Edit {name}')" data-replace-name='href' >Edit</a></td>
        </tr>
    </table>
</div>
<!-- os elementos que serão iterados -->
<select class="myCombo" ></select>
<ul class="myList" ></ul>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Age</th>
            <th>Alert</th>
        </tr>
    </thead>
    <tbody class="myTable"></tbody>
</table>

Resultado:

<!-- templates é um trecho da tela que pode ficar escondido para ser clonado -->
<div class="templates" style="display:none">
    <ul>
        <li class="item-list">
            <span data-html-name=""></span> (<span data-html-age=""></span>)
        </li><li>
        </li></ul>
    <table>
        <tbody><tr data-attr-id="data-id" class="item-table">
                <td data-html-id=""></td>
                <td><input type="text" data-val-name="" data-css-usercolor="color"></td>
                <td data-html-age=""></td>
                <td><a href="javascript:alert('Edit {name}')" data-replace-name="href">Edit</a></td>
            </tr>
        </tbody>
    </table>
</div>
<!-- os elementos após sofrerem a iteração dos registros -->
<select class="myCombo">
    <option data-val-id="" data-html-name="" value="1">Cicero</option>
    <option data-val-id="" data-html-name="" value="2">Nero</option>
    <option data-val-id="" data-html-name="" value="3">Cezar</option>
    <option data-val-id="" data-html-name="" value="4">Caligula</option>
</select>
<ul class="myList">
    <li class="item-list">
        <span data-html-name="">Cicero</span> (<span data-html-age="">36</span>)
    </li>
    <li class="item-list">
        <span data-html-name="">Nero</span> (<span data-html-age="">28</span>)
    </li>
    <li class="item-list">
        <span data-html-name="">Cezar</span> (<span data-html-age="">32</span>)
    </li>
    <li class="item-list">
        <span data-html-name="">Caligula</span> (<span data-html-age="">48</span>)
    </li>
</ul>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Age</th>
            <th>Alert</th>
        </tr>
    </thead>
    <tbody class="myTable"><tr data-attr-id="data-id" class="item-table" data-id="1">
            <td data-html-id="">1</td>
            <td><input type="text" data-val-name="" data-css-usercolor="color" style="color: red;"></td>
            <td data-html-age="">36</td>
            <td><a href="javascript:alert('Edit Cicero')" data-replace-name="href" data-view-replaced="true">Edit</a></td>
        </tr><tr data-attr-id="data-id" class="item-table" data-id="2">
            <td data-html-id="">2</td>
            <td><input type="text" data-val-name="" data-css-usercolor="color" style="color: blue;"></td>
            <td data-html-age="">28</td>
            <td><a href="javascript:alert('Edit Nero')" data-replace-name="href" data-view-replaced="true">Edit</a></td>
        </tr><tr data-attr-id="data-id" class="item-table" data-id="3">
            <td data-html-id="">3</td>
            <td><input type="text" data-val-name="" data-css-usercolor="color" style="color: gray;"></td>
            <td data-html-age="">32</td>
            <td><a href="javascript:alert('Edit Cezar')" data-replace-name="href" data-view-replaced="true">Edit</a></td>
        </tr><tr data-attr-id="data-id" class="item-table" data-id="4">
            <td data-html-id="">4</td>
            <td><input type="text" data-val-name="" data-css-usercolor="color" style="color: green;"></td>
            <td data-html-age="">48</td>
            <td><a href="javascript:alert('Edit Caligula')" data-replace-name="href" data-view-replaced="true">Edit</a></td>
        </tr></tbody>
</table>

Neste caso foi criado um combo com quatro opções uma para cada registro, uma lista com quatro itens um para cada registro e uma tabela com quatro linhas uma para cada registro. Pois foi aplicado um assign para cada registro.

📦 Exemplo prático do método 'extractCollection'

Este método funciona como uma operação inversa ao iterate, onde é extraído uma coleção de dados de um elemento jQuery. Como exemplo podemos utilizar o resultado do exemplo anterior.

Javascript:

var extracted = $('.myTable').view('extractCollection', {
  valueObject: {id:null,name:null,phone:null,age:null}, 
  selector: '.item-table', 
});
console.log(extracted)

HTML:

<!-- Considere aqui o resultado do exemplo anterior -->

Resultado:

[
    {"id": "1","name": "Caligula","phone": null,"age": "48"},
    {"id": "2","name": "Nero","phone": null,"age": "28"},
    {"id": "3","name": "Cicero","phone": null,"age": "36"},
    {"id": "7","name": "Cezar","phone": null,"age": "32"}
]

📝 Licença

Este projeto é licenciado sob a Apache License, Version 2.0.