Knockout 단일 페이지 앱에 정적 컨텐츠 "페이지"추가

Question

Google지도에 표시되는 세부 정보를 입력하는 데 주로 의존하는 경로 계획 단일 페이지 앱을 만들었습니다. 전체 내용은 원래 자바 스크립트로만 작성되었지만 저장, 로그인 등의 작업을 수행 할 수있는 ASP.NET MVC 서버가 있습니다. 그러나 도움말 및 이용 약관과 같은 정적 인 콘텐츠를 표시하는 효과적인 방법으로 어려움을 겪고 있습니다. 지금은 메인 HTML에 모든 내용을 담고 있으며 부울 위에 모델 바인딩을 사용하여 팝업의 내용을 표시하거나 숨 깁니다. 나는이 문제가 몇 가지있다 느낌 :

1. SEO - 모든 내용이 한 페이지에 보통 숨겨하지 특히 ​​접근이 찾을 수 없을 것입니다 검색 엔진 같은 느낌 때문에/컨텐츠를 최적화를
2. 부풀린 모델 - 추가 부울은 "모델"보다 "보기"가 더 좋으며 각 콘텐츠마다 새로운 속성이 필요하고 논리를 나타 내기 때문에 DRY가 아닐 수도 있습니다.

이러한 문제를 완화하는 데 도움이되는 몇 가지 패턴과 프레임 워크는 무엇입니까? JSON을 통해 서버와 통신하는 데 도움이되는 모든 솔루션을 사용하는 것이 좋습니다.

Answer 1

무엇을 보여줄지를 제어하는 ​​추가 부울은 내 생각에 완벽하게 괜찮습니다. 그들은 view도 아니고 model도 아니며, View Model입니다. 결국 knockoutjs는 MVVM 패턴을 따릅니다.

모델을 계속 볼 수있게하려면 표시 할 템플릿을 결정하는 하나의 관찰 가능 항목을 사용하거나 팝업이 표시되어야하는지 여부를 제어 할 수있는 관찰 가능 코드를 사용할 수 있습니다 (코드 번호 :

).

HTML :

<script type="text/html" id="terms"> ... </script> 

<script type="text/html" id="conditions"> ... </script> 

<script type="text/html" id="help"> ... 
    <button data-bind="click: show(undefined)"> close </button> 
</script> 

<button data-bind="click: show('help')"> Help </button 
<div id="popup" data-bind="if: showActive"> 
<!-- ko template: showActive --> 
<!-- /ko --> 
</div>  

자바 스크립트 : 검색 엔진 최적화 부분에 대해

var viewModel = function(){ 
    var self = this; 
    self.showActive = ko.observable(); 

    self.show = function(showWhat){ 
     self.showActive(showWhat); 
    } 
} 
ko.applyBinding(new viewModel()) ; 

, google에는 그에 관한 기사가 많이 있습니다.