Używanie agility.js do układu strony i kompozycji

Jestem nowy w bibliotekach javascript w stylu MVC, więc wybaczcie, jeśli to pytanie jest zbyt proste. Próbuję napisać Single-Page Application całkowicie w jQuery i agility.js. Przykłady podane w agility.js documentation składają się wyłącznie z dodania elementów html do katalogu głównego dokumentu. Pytanie: Czy istnieje sposób "Best-Practices" na składanie strony według komponentów.Używanie agility.js do układu strony i kompozycji

Tutaj jest szorstka zarys mojego html aplikacji:

<html> 
    <head> ... </head> 
    <body> 
     <header> ... </header> 
     <div id=PageHolder> 
      <div id=AppPane_1></div> 
      <div id=AppPand_2></div> 
     </div> 
     <footer> ... </footer> 
    </body> 
</html>

ciągu div „w” AppPane będzie treść wniosku.

Dobra, biorąc pod uwagę to wszystko, nie pytam, co mogę zrobić, ale pytam, co powinienem zrobić.

widzę z dokumentacją i moich badań, że mam 3 możliwości:

tworzę stronę kompozycji z obiektów atomowych zwinność i montować je w jQuery dokumentu gotowego bloku. $$.document.append(Foo) działa dla elementu głównego, ale nie mogłem wymyślić, jak dodać dzieci Foo do foo.
Użyj jednego (bardzo duże) Obiekt zwinność, która określa podstawowe html statycznej z góry i dołączyć do kontroli i etażerka, że używając controller funkcje (które havn't był w stanie dostać się do pracy albo)
Użyj jednej obiekt zwinności root i dołącz do niego wszystkie dzieci używając widoku (w jakiś sposób też nie mogłem tego zrobić).

Który z nich jest najlepszy i jaka jest jego składnia? Z góry dziękujemy, że wszelkie wskazówki dotyczące składania komponentów html w aplikację Cogent Agility byłyby mile widziane.

http://jsbin.com/ojenon/1/

Źródło

2012-09-15 Evan Plumlee

BTW: Odniesienie plik w jsbin jest źle . Popraw: http://agilityjs.com/docs/agility.min.js – yckart

Moim zdaniem, najlepszym sposobem, aby uporządkować moduły strona jest zapisanie indywidualnych szablonów po stronie klienta w znaczniki skryptów w głowę:

<html> 
<head> 
<script type="text/template" id="template1"> 
    <b>Some <abbr>HTML</abbr> template</b> 
</script> 
<script type="text/template" id="template2"> 
    <b>Some <abbr>HTML</abbr> template</b> 
</script> 
</head> 
...

Można nawet wybrać używać języka szablonów, takiego jak jQuery.template lub handlebars.js, aby ułatwić logikę, interpolację zmiennych itp.

Następnie, w swojej kontroli ler, możesz załadować zawartość HTML tagów skryptu tych szablonów z DOM i skopiować je do docelowego div (#PageHolder).

Alternatywą dla tej techniki byłyby przechowywania szablonów w dosłownym obiektu JS w głowę:

<script type="text/javascript"> 
var Templates = { 
    template1: "<b>Some <abbr>HTML</abbr> template</b>" 
    ... 
} 
</script>

To dopiero początek. Istnieje wiele innych opcji, takich jak wstępne kompilowanie szablonów, dzielenie szablonów w celu uniknięcia zbędnych kompilacji szablonów itp. Z strukturalnego punktu widzenia utrzymywanie szablonów w lokalizacji poświęconej pomoże skalować pojedynczą aplikację.

Źródło

2012-10-28 03:38:07 mickeyreiss

Konie na kursy chyba, ale wolę mieć kod szablonu obok kodu Agility, aby był widoczny razem.Nie szczególnie podoba widząc html i stylizacji wnętrza obiektu widoku, ale można je skonfigurować w innych zmiennych i odwoływać się do nich w widoku jak ten:

var frmMainTemplate = '<div>' + 
         '<input type="text" data-bind="name" />' + 
         '<p>You typed <span data-bind="name" /></p>' + 
         '</div>'; 
var frmMainStyle = '& span {background-color:#888; color:#fff;}'; 

var frmMain = $$({ 
    model: {name:''}, 
    view: { 
    format: frmMainTemplate, 
    style: frmMainStyle 
    }, 
    controller: {} 
}); 

$$.document.append(frmMain);

Źródło

2013-07-26 11:00:46 KevBrew

Używanie agility.js do układu strony i kompozycji

Odpowiedz

Powiązane problemy