Skip to main content

jquery template - jumate de MVC

Nu odata am scris ceva asemanator cu aceste cond in jQuery:

var sablon = "<b> ${nume} </b>";
Problema la acest template este modul in care se poate manipula . In cazul in care dorim sa facem o modificare, suntem nevoiti sa cautam in cod unde avem definit template-ul si sa facem modificari pe el. In cazul in care un nou dezvoltator trebuie sa faca modificari, el o sa fie nevoit sa cauta in cod.

O solutie este sa folosim un template pentru acest lucru. Primul pas este sa definim template-ul in forma urmatoare:

<script id="numeTemplate" type="text/html">
<b> ${nume} </b>
</script>
Prin acest mod, o sa ne putem referi template-ul nostru in orice loc din cod pe baza unui ID, totodata o sa fie foarte usor de grupat toate template-urile.

Urmatorul pas este sa referim pe langa libraria de jquery si libraria pentru template-uri. Numele ei este: jquery.tmpl.js.

Template-ul pe care l-am definit mai sus trebuie putin modificat, forma sa trebuie sa fie:

<script id="numeTemplate" type="text/html">
<b> ${nume} </b>
</script>
JSON va scoate automat valoarea pentru nume prin ${}. Putem sa avem orice fel de conditii logice, in exemplul dat mai sus, avem un IF care afiseaza imagini diferite pentru barbati si femei. Prin acest mecanism putem sa cream template-uri complexe, in care logica care defineste modul in care se face randarea la anumite elemente din template sa fie in interiorul la template.
Datele pentru care facem randarea sunt:
var persoane = [
{ Nume = "Stefan", IsMan = 1},
{ Nume = "Oana", IsMan = 0},
{ Nume = "Mihai", IsMan = 1}
];
Pentru a putea folosi template-ul definit, putem sa folosim functiile
  • tmpl([data],[options])
  • $.tmpl(template,[data,[options])
Pentru exemplul dat mai sus ar trebuii sa scriem:
$("numeTemplate").tmpl(persoane).appendTo("#listaPersoaneDiv")
Unde listaPersoaneDiv reprezinta id la divul care afiseaza template-ul.
Si gata, in acest moment avem un template pe care il putem folosi in orice locatie. Putem sa privim totul ca o jumatate din MVC, doar partea de Model-View.
Pentru mai multe informatii: http://api.jquery.com/jQuery.template/

Comments

  1. buna ziua
    apropo de jquery am si eu o problema cu aceste program script sau ce este el...in consola de erori imi apare o chestie cum jquery in not defined si inca o eroare $j in not defined....si din cauza aceasta nu pot vedea diferite chesti pe un site de vanzari si cumparari....nu ma lasa sa dau comenzi pe site de cumparare si multe alte...care este problema???

    ReplyDelete

Post a Comment

Popular posts from this blog

How to audit an Azure Cosmos DB

In this post, we will talk about how we can audit an Azure Cosmos DB database. Before jumping into the problem let us define the business requirement: As an Administrator I want to be able to audit all changes that were done to specific collection inside my Azure Cosmos DB. The requirement is simple, but can be a little tricky to implement fully. First of all when you are using Azure Cosmos DB or any other storage solution there are 99% odds that you’ll have more than one system that writes data to it. This means that you have or not have control on the systems that are doing any create/update/delete operations. Solution 1: Diagnostic Logs Cosmos DB allows us activate diagnostics logs and stream the output a storage account for achieving to other systems like Event Hub or Log Analytics. This would allow us to have information related to who, when, what, response code and how the access operation to our Cosmos DB was done. Beside this there is a field that specifies what was th...

Cloud Myths: Cloud is Cheaper (Pill 1 of 5 / Cloud Pills)

Cloud Myths: Cloud is Cheaper (Pill 1 of 5 / Cloud Pills) The idea that moving to the cloud reduces the costs is a common misconception. The cloud infrastructure provides flexibility, scalability, and better CAPEX, but it does not guarantee lower costs without proper optimisation and management of the cloud services and infrastructure. Idle and unused resources, overprovisioning, oversize databases, and unnecessary data transfer can increase running costs. The regional pricing mode, multi-cloud complexity, and cost variety add extra complexity to the cost function. Cloud adoption without a cost governance strategy can result in unexpected expenses. Improper usage, combined with a pay-as-you-go model, can result in a nightmare for business stakeholders who cannot track and manage the monthly costs. Cloud-native services such as AI services, managed databases, and analytics platforms are powerful, provide out-of-the-shelve capabilities, and increase business agility and innovation. H...

Cloud Myths: Migrating to the cloud is quick and easy (Pill 2 of 5 / Cloud Pills)

The idea that migration to the cloud is simple, straightforward and rapid is a wrong assumption. It’s a common misconception of business stakeholders that generates delays, budget overruns and technical dept. A migration requires laborious planning, technical expertise and a rigorous process.  Migrations, especially cloud migrations, are not one-size-fits-all journeys. One of the most critical steps is under evaluation, under budget and under consideration. The evaluation phase, where existing infrastructure, applications, database, network and the end-to-end estate are evaluated and mapped to a cloud strategy, is crucial to ensure the success of cloud migration. Additional factors such as security, compliance, and system dependencies increase the complexity of cloud migration.  A misconception regarding lift-and-shits is that they are fast and cheap. Moving applications to the cloud without changes does not provide the capability to optimise costs and performance, leading to ...