Knockout.js Struktura projektu

Question

Szukałem Angular.js i Knockout.js jako potencjalnych rozwiązań front-end. Uwielbiam samouczki i dokumentację Knockout. Jednak nie jest dla mnie jasne, w jaki sposób Knockout obsługuje szablony większych aplikacji.

Na przykład w kątowa, byś zrobić główny szablon takiego:

<div id="content" class="container" ng-view></div> 

I wtedy to będzie wypełniana przez przez „podszablonów”, na przykład:

<p>This is a partial</p> 

moje pytanie czy Knockout wspiera tę samą koncepcję? Wygląda na to, że Knockout chce użyć szablonu "foreach" (http://knockoutjs.com/documentation/template-binding.html). Jednak to nie rozwiązuje kwestii podziału kodu HTML na mniejsze segmenty.

Czy jestem na dobrej drodze? Czy jest coś, czego mi brakuje w odniesieniu do struktury katalogów Knockout?

EDYCJA: Mam dobre opinie. Rozumiem, że Knockout nie ma wbudowanego rozwiązania szablonowego. Jeśli to prawda, prawdopodobnie będę potrzebował Angular.

Answer 1

Knockout nie jest bezpośrednią konkurencją dla frameworka, jest raczej mniejszą biblioteką do wiązania danych w stylu MVVM niż pełna struktura do tworzenia aplikacji z jedną stroną.

Proszę spojrzeć na Durandal (http://durandaljs.com/), który jest oparty na Knockout i zapewnia kompozycję opartą na zalecanej strukturze projektu i wiele innych części dla pomyślnej implementacji aplikacji z jedną stroną (router, dialogi, oprzyrządowanie, proces budowania, wsparcie dla amd etc ...) podobne do Angular lub Ember.

Answer 2

Możesz osiągnąć to, co chcesz, korzystając z szablonów podrzędnych, które można traktować jako częściowe widoki.

Na przykład:

<script type="text/html" id="main-template"> 

    some content... 

    <!--ko template: {name: 'sub-template-1'} --><!-- /ko --> 

    some more content... 

    <!--ko template: {name: 'sub-template-2'} --><!-- /ko --> 

</script> 

I nie będziesz musiał załadować szablon główny, jak:

<!-- ko template: { name: 'main-template' } --><!-- /ko --> 

Answer 3

knockout AMD pomocników Zobacz Ryan Niemeyera project on github

Z Readme:

Ta wtyczka została zaprojektowana jako lekkie i elastyczne rozwiązanie dla pracującej z modułami AMD w Knockout.js. Zapewnia dwie kluczowe funkcje:

1 - Rozszerza domyślny silnik szablonów, umożliwiając załadowanie zewnętrznych szablonów za pomocą wtyczki tekstowej modułu ładowania AMD. Umożliwia to tworzenie szablonów w pojedynczych plikach HTML i wstawianie ich zgodnie z potrzebami za pomocą nazwy (najlepiej w przypadku, gdy szablony są zawarte w zoptymalizowanym pliku ).

2- Tworzy wiązanie modułu, które zapewnia elastyczny sposób ładowania danych z modułu AMD i wiąże go z szablonem lub z szablonem anonimowym/wbudowanym .

Answer 4

Nie podobało mi się jednoznaczne powiązanie z szablonem w KO, było wiele ciągów wszędzie. Więc stworzyłem konwencję nad biblioteką konfiguracji

można zainstalować przy użyciu Nuget

Install-Package Knockout.BindingConventions 

Powiedzmy, że masz element this.selectedCustomer od modelu, a jego zawartość jest typu CustomerViewModel. Z mojej bibliotece Ten fragment kodu html

<div data-name="selectedCustomer"></div> 

wiązałby div do szablonu o nazwie „CustomerView” http://jsfiddle.net/xJL7u/5/

Posiada kilka innych konwencji zbyt przycisków itp https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki

Stworzyłem także zewnętrzny silnik szablonów, który wykorzystuje powyższą strukturę razem, są one naprawdę wydajne:

Install-Package Knockout.Bootstrap 

https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki