0

사이트에서 WYSIWYG 방식으로 요소 (콘텐츠 블록)를 만들고 편집 할 수있는 CMS를 프로그래밍하고 있습니다. 기본적으로 로그인하면 동일한 웹 사이트를 시각적으로 볼 수 있지만 요소를 가져오고 클릭하면 알로하와 같은 편집자 또는 추가 컨트롤이 표시됩니다. 예컨대javascript mvc 프레임 워크 디자인 연습 (장소 편집 인터페이스)

: 왼쪽, 가운데 및 오른쪽 정렬 사이 선택을 허용 측면에 작은 메뉴를 표시 할 단락을 떠오르게

  • 단락에
  • 클릭은 편집 할 것
  • 이미지 위에 마우스를 올리면 이미지 오른쪽에 점이 표시되어 끌 수 있으므로 이미지 너비가 변경됩니다 (높이가 비례로 업데이트 됨)
  • 웹 사이트에있는 블록 중 하나를 가리키면 덮인 블록 앞에 다른 블록을 만들 수있는 "+"버튼이 나타납니다. 데이터 -이있는 각 HTML 요소에 jQuery 플러그인을 호출하는 인스턴스 자바 스크립트가있다 :

나의 현재 전략은 내가 Nike Better World에 사용 톱 토록하여 이후 한 유사한 기술을 사용하는 것입니다 controller 속성, data-controller 속성에 의해 지정된 플러그인의 이름.

이 개념을 조금 확장하면 모든 종류의 컨트롤을 콘텐츠 블록에 첨부하는 데 사용됩니다.

그러나 최근 멍청한 놈 이었지만 최근에는 backbone.js와 같은 자바 스크립트 MVC 프레임 워크를 발견했습니다. 나는 MVC와 함께 서버 측 (Kohana에서) 작업을 해왔지만 자바 스크립트에서는 아직 사용하지 않았다. 나는 그것을 사용할 수있는 것처럼 보이지만 나에게 불명확하다. 전략은 무엇이 겠는가. 내가하고있는 CMS는 적절한 자바 스크립트 응용 프로그램과 오래된 웹 사이트 인 html 사이의 하이브리드 형식입니다. 이해가 안됩니다. 예를 들어, backbone.js의 콜렉션 객체 (content 블록에 대한 객체)가 html 페이지에 이미로드되어있는 경우 (javascript로로드하는 것이 의미가 없음) 어떻게 사용할 수 있습니까?

아무도 어떤 제안이 있습니까?

+1

특정 문제에 대해 특정 질문을해야한다고 생각합니다. "CMS를 어떻게 구축해야합니까?"라는 질문은 다소 모호합니다. 백본을 배우고 조금 뒤로 물러나서 작은 것을 만들려고한다면 나에게 권합니다. – bradgonesurfing

+0

그럼 js로로드해야합니다. 예 : 특정 페이지는 블록을 포함합니다. 페이지는 콜렉션입니다. 블록은 모델입니다. 페이지 렌더링 콜렉션을로드 할 때 모든 모델 뷰에 이벤트를 첨부 할 수 있습니다. –

+0

나는 내 질문이 매우 애매하지 않다고 생각한다. 내가 자바 스크립트를 통해 모든 모델을로드하지 않는 방법을 알아야하지만, html (데이터 속성은 아마도?)에 이미 있어야하고 백본에 특정 모델이 이미로드되어 있다고 알리는 것이 좋습니다. ... 그리고, 물론 그것이 좋은 습관이라면. 대답을 –

답변

0

빠른 답변 :

ContentModel : 편집하려는 데이터 항목입니다. 실제 내용. 예 : $(#mydiv).text();

DisplayView : ContentModel 먼저 인스턴스화 $('#mydiv).text()

EditView로 초기화되는 곳입니다 (이 데이터를 표시합니다 뷰 : 아마도이 데이터를 "편집"(텍스트 영역)의보기 - ContentModel (동일 모델 객체)

EditTemplate로 초기화, 생성 :의 해당 HTML 편집 상자가 같아야합니다 "어떻게"(채우고 즉 _.template(...), 텍스트 영역/상자 등을 사용하여 만들 수

이제 DisplayView는 curre를 유지합니다. 그것 자체의 초기화시 텍스트의 nt 값 (모델에 있음). 이 뷰 (예를 들어 div 블록)에서 '편집'버튼/링크를 클릭하면 새로운 EditView가 생성되고 텍스트를 표시하는 현재 div (#mydiv)가 "숨겨지고"EditView가로드 된 것을 보여줍니다 모델 데이터가 여기에 있습니다 ($.append()이 가장 친한 친구입니다).

취소를 클릭하면 EditView를 숨기거나 제거하고 기본 div 백을 표시합니다. 성공적으로 (서버에서) 업데이트하면 EditView가 숨겨지고 DisplayView에 데이터가 표시됩니다! DisplayView는 모델의 "변경"이벤트에 가입 할 수 있습니다! 그래서 일단 모델이 변경되면 뷰는 무엇을 해야할지를 알게됩니다 !!

희망이 도움이됩니다.

+0

고맙습니다! 보기 (EditView, 나중에 instatiiated되지 않습니다) 내 일반적인 문제는 그들이 미리 HTML에서 서버에서 보낸 렌더링해야합니다. 컨트롤러는 html 문서에서이 html 조각이 특정 모델 및 특정 뷰에 "속해있다"는 것을 어떻게 든 알아야합니다. 그렇게하는 방법? –

+0

예를 들어 답을 업데이트 할 수 있습니까? 그것은 우리 가이 문제를 해결하는 데 큰 도움이 될거야 :) 당신은 모든 모델 /보기가 데이터 당 생성되도록 하시겠습니까 ??? 그럼 아주 쉽습니다! 보내진 데이터를 기반으로'$ .ready'에서 '명시 적'생성을하십시오. 데이터에 따라 html5 데이터 - * 속성을 사용하여 데이터를 필터링하거나 간단한 클래스만으로 도움을 줄 수도 있습니다. – PhD