Finnes det en penere måte å legge til innhold vha JS?

[Kirchhoff]

Hei,

 

De siste dagene har jeg jobbet med en webapp. Det har vært viktig for meg å lære meg ajax, så derfor har jeg lagt mye vekt på at jeg skulle bruke det.

Nå returnerer* jeg en html fil med en del javascript code, grid/layout og masse <div>s. Når html dokumentet er hentet og klart, så henter javaskript koden en del data med $.get og derreter concater en string med html som den senere appender til de forskjellige <div>ene. Pseudokode:

$.get data
var element = '<htmlkode>'
element = element.concat(litt data)
element = element.concat('<htmlkode>')
element = element.concat(litt data)
element = element.concat('<htmlkode>')
...
element = element.concat(litt data)
element = element.concat('<htmlkode>')
$("#mydiv").append(element)

Finnes det noen alternativer til dette? Jeg ønsker jo ikke at siden skal måtte reloades hver gang jeg ønsker å bytte ut et element. For meg som vanligvis programmerer i helt andre språk, så ser denne blandingen av språk og repetering ganske amatørmessig ut.

 

EDIT: *Når jeg sier returnerer så mener jeg at at min cherrypy server sender filen til klienten når han går på www.kirchhoffWebApp.com

Endret 16. mars 2015 av Kirchhoff

[Enthroner]

Hei!

 

Din intuisjon er helt rett. Dette er ikke måten en bør gjøre dette på.

Du bør finne noe som kan gjøre templating for deg.

 

Min anbefaling er handlebars som du kan finne her: http://handlebarsjs.com/

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

<script>
  var source   = $("#entry-template").html();
  var template = Handlebars.compile(source);

  $.get('url/til/data.json', function(jsonData) {
    //jsonData bør ligne veldig på denne {title: "The title", body: "The body"};
    template(jsonData);
  });
</script>

Nå blir neste problem, hva skjer dersom data på server endrer seg? Hva skjer dersom du manipulerer data i HTML siden og vil at det skal oppdateres på server?

 

Da er det på tide å se på ordentlige framsiderammeverk som Angular.js Backbone.js Ember.js Can.js etc etc. Disse rammeverkene implementerer varianter av MVVM eller MVC for deg, som kjører på klienten.

 

Lykke til!