동적이지만 서버 측 구동 프론트 엔드를 구축하기위한 JavaScript 프레임 워크

Question

중첩 된 목록이 다소있는 작은 응용 프로그램을 빌드하고 각 목록에서 다양한 항목을 선택하면 다른 중첩 목록의 내용이 필터링됩니다.

목록 하나

• 애플
  • 전화
    
    • 아이폰
  • 컴퓨터
    
    • 맥북 에어
    • 삼성
  • 전화
    
    • 갤럭시 S

목록 두

• 베스트 바이 (Best Buy)
  • 앤 아버, MI
  • 시카고, 일리노이
• 월마트
  • 랜싱, MI

사용자가 애플 "을 클릭하면> 전화 "를 선택하면 서버는 목록 2의 관련 항목을 찾고 목록 2를 업데이트하여"Best Buy "(assumin g Best Buy는 Apple에서 만든 휴대폰을 판매하는 유일한 상점 임)

제 질문은 누구에게도 이것을 구축하는 데 사용해야하는 프런트 엔드 JS 라이브러리에 대한 권장 사항이 있습니까? 이것은 서버의 AJAX JSON 응답을 기반으로 DOM (목록)을 업데이트하는 작업입니다.

나는 KnockoutJS를 살펴 봤지만 각 목록에 대해 viewModel을 만들고 KnockoutJS 매핑 라이브러리를 통해 업데이트하려고하면 어색한 것처럼 보였다.

jQuery를 사용하는 것에 대해 생각하고 있었지만 DOM의 큰 섹션을 만드는 데 큰 팬이 없었습니다 (빨리 못 생기는 것처럼 보입니다).

내가 피하고 싶은 한 가지 (그리고 내가 KnockoutJS를보고 있었던 이유)는 코드에 마크 업을 쓰는 것과 같습니다. "HTML"에서 마크 업을 유지하고 프레임 워크를 통해 JS 데이터를 이러한 요소에 바인딩하는 아이디어를 좋아합니다.

또한 jQuery를 사용하여 모든 시각적 인 "보풀", 이벤트 바인딩 등에 사용할 수 있기를 바랍니다.

감사합니다 "는 'HTML'에 유지 ... 마크 업"의 개념을 해결하기 위해 노력하고

Answer 1

나는 바인딩의 관점에서 Backbone.js에 [1]

그것은 좀 더 유연한 Knockout.js 이상의 보인다 정착 끝났다. 각 목록 수준을 구축하기 위해 백본 지원 JS 템플릿을 사용하고 있습니다. 이것은 약간의 코드가 필요하지만 백본은 매우 유연합니다 (따라서 코드의 비트). 이것이 많은 다른 JS 프레임 워크에서 가능하다는 것을 확신하지만, 나는 더 많은 진전을 이루었다 고 생각한다. 백본은 프레임 워크/API/복잡성에 대한 깊은 이해가 필요 없기 때문에 (내) 코드가 좀더 장황한 것이지만, 이것 때문에 모든 것이 어떻게 작동 하는지를 더 쉽게 이해할 수 있습니다.

[1] http://backbonejs.org/

Answer 2

이 부분적인 대답의 더 많은 것이다. 내가 지금처럼 각 메뉴 항목에 대한 템플릿이 될 수있는 HTML에서 일반 메뉴 항목을 만들 것입니다 :

<li id="menuItemTemplate" class="menuItem"> 
    <span class="menuItemText"></span> 
    <ul class="submenu"></ul> 
</li> 

이 페이지에 보이는 위치가 잘못 될 것입니다; 각 메뉴 항목에 삽입되는 것은 HTML 일뿐입니다. 그런 다음 메뉴 항목을 추가 할 때 JavaScript는 목록에 필요한만큼 menuItem 요소를 추가하는 역할을합니다. HTML 조작과 관련하여 JavaScript는 id 또는 class 속성을 추가하여 데이터를 구성하거나 스타일을 지정하고 각 항목의 텍스트 내용을 추가하는 등의 작업을 수행하면됩니다. 샘플 구현은 다음과 같을 수 있습니다 (jQuery를 좋아합니다).

function loadMenuItem(text, parentId) { 
    // Grab the template 
    var newItemHtml = $("#menuItemTemplate")[0]; 
    // Set its id to something unique 
    $(newItemHtml).attr("id", getNextId()); 
    // Set the text 
    $(newItemHtml).find("span.menuItemText").html(text); 
    // Put it in the clicked menu 
    $(parentId + "ul.submenu").append(newItemHtml); 
} 

결국 프로젝트를 프로그래밍하지 않겠습니다. 나는 오직 너에게 나의 선호도를 줄 수있다. 이것이 상당한 시간이 걸릴 것이라면, 당신이해야 할 가장 좋은 일은 (작은 규모로, 분명히) 재미있는 소리를내는 모든 프레임 워크를 시험해 봄으로써 일반적인 느낌을 얻는 것이라고 말하고 싶습니다. 당신은 각각의 DOM 변환 응용 프로그램을 개발하는 것을 좋아합니다. 그러면 다른 프레임 워크를 소개하고 더 좋아할 것 같은 더 나은 아이디어를 얻을 수 있습니다.

Answer 3

하지 질문에 직접 대답 - 아직도이 Kendo UI MVVM

1. MVVM using Kendo UI in three simple steps
2. Kendo UI Web MVVM
3. Understanding MVVM – A Guide For JavaScript Developers
4. MVVM in Kendo UI Walkthrough
에서 살펴볼 가치가있다
5. Build Single Page Apps – Part 7 – MVVM and KnockoutJS