Autor Wątek: html generowany głównie przez js  (Przeczytany 3078 razy)

Offline Puchaczov

  • Użytkownik

# Lipiec 23, 2013, 13:47:20
witajcie, jestem w trakcie tworzenia portalu z grami  (coś podobnego do kurnika). Ogólnie strona będzie bardzo dynamiczna (częste odświeżanie widoku strony, websockety) i doszedłem do etapu w którym mimo wszystko na 1 stronie potrzebuje mieć menu i złączone z tym podstrony stronki(sekcje -bez przeładowywania). I teraz zastanawiam się czy dobrą praktyką jest zamiast pisania szkieletu w htmlu, generować ten szkielet przy pomocy javascript? Mam na przykład otwartą grę, ale na tej samej stronie jest też przeglądarka więc logicznym jest, że gdy kliknę na przeglądarkę gier, schowa mi się gra i otworzy sekcja z przeglądarką gier. Szczerze powiedziawszy to zaklepanie tego w js wydaje się jedynym rozwiązaniem ale z drugiej strony łatwiej później edytować wygląd jeżeli mam zwyczajnego htmla :) Możecie coś podpowiedzieć?

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline Avaj

  • Użytkownik

# Lipiec 23, 2013, 14:00:54
Zależy co rozumiesz przez generowanie html przez JS. Jak ajaxem wczytasz listę gier to będzie ok, jak będziesz próbował robić template'y na JS to nie bardzo :)

Offline Xion

  • Redaktor
    • xion.log

# Lipiec 23, 2013, 14:09:04
Jeśli przez "generowanie html przez JS" rozumiesz:
$('<div/>').addClass('item').css('float', 'left').appendTo($('#someList'));to idź, sięgnij po jeden z licznych template engine'ów po stronie klienta i nie grzesz więcej.

Cytuj
Szczerze powiedziawszy to zaklepanie tego w js wydaje się jedynym rozwiązaniem
A mi nie. Czemu niby zwykły link prowadzący do zwykłej podstrony miałby być gorszy?

Offline Puchaczov

  • Użytkownik

# Lipiec 23, 2013, 14:24:44
miałem na myśli coś takiego:
//funkcja modułu tworzącego podstrony:
    var createMainFrame = function () {
        var divMainFrame = $(document.createElement('div'));
        var ulContent = $(document.createElement('ul'));
        var ulTab = ulContent.clone();
        divMainFrame.append(ulTab);
        divMainFrame.append(ulContent);
        parent.append(divMainFrame);
        mainframe = { div: divMainFrame, ulContent: ulContent, ulTab: ulTab }; //przechowywane w pamieci aby sie szybko miedzy nimi przelaczac
    };
    var addWindow = function (context, htmlNode, tabText) {
        var li = $(document.createElement('li')).attr('class', 'window');
        var liTab = li.clone().attr('class', 'tab');
        liTab.text(tabText);
        li.append(htmlNode);
        ...
    }
//parent jest tutaj okalającym elementem (np. div) który jest zaklepany w czystym html + css
//htmlNode jest tutaj podstronka ktora bedzie przechowywalo abstrakcyjne 'okno'. Zeby nie robic tego htmlNode w js musialbym chyba napisac to bezposrednio na stronce i dac display:none a pozniej tylko wyswietlac odpowiednie okno co tez wydaje mi sie srednim pomyslem

czyli teoretycznie chce zrobic cos takiego:

<body>
  <div>cos</div>
  <div>dynamicznie generowane menu(js)</div>
  <div>
    <div>cos innego</div>
    <div>
      <div class="podstawa-okna"> abstrakcyjne okno <- moje okno przechowuje okno gry lub przegladarki gier lub jakiekolwiek inne okno, reaguje ono na zdarzenie on click dynamicznie generowanego menu</div>
     </div>
  </div>
</body>
« Ostatnia zmiana: Lipiec 23, 2013, 14:35:11 wysłana przez Puchaczov »

Offline Xion

  • Redaktor
    • xion.log

  • +3
# Lipiec 23, 2013, 16:00:09
Warunek implikacji z mojego poprzedniego posta jest więc spełniony. Jeśli chcesz dalej bawić się w coś takiego, użył silnika szablonów. Z tych znanych mi, Underscore.js to proste i szybkie rozwiązanie; Closure Templates trochę bardziej wysublimowane.

Offline WielkiPan

  • Użytkownik

# Lipiec 27, 2013, 20:52:50
Przychodzi mi na myśl Angular.js, Backbone.js albo Prototype.js.
Chociaż najbliższe temu są pewnie:
http://beebole.com/pure/
https://github.com/janl/mustache.js
http://akdubya.github.io/dustjs/

Offline Xion

  • Redaktor
    • xion.log

  • +1
# Lipiec 28, 2013, 01:49:59
Cytuj
Przychodzi mi na myśl Angular.js, Backbone.js albo Prototype.js.
AFAIK to są całe frameworki typu MVC, więc mogą być zbyt ciężkim działem dla OP.

Cytuj
Chociaż najbliższe temu są pewnie:
A to są z kolei przedstawiciele pomysłu znanego jako "logic-less templates", który brzmi dobrze w teorii ale w praktyce jest niepotrzebne ograniczający.