콘텐츠가 포함된 새 api.php 파일을 만듭니다. 코드 복사 코드는 다음과 같습니다. header('Content-Type: application/json; charset=utf-8'); die(json_encode(array('name'=>'tom'))); 새 index.html 파일을 만듭니다. (Backbone은 jquery와 underscore를 기반으로 합니다. 우리는 템플릿 파싱을 위해 Mustache를 사용합니다. 물론 underscore에 다른 haml, jade, 템플릿을 사용할 수도 있습니다) 내용: 코드 복사 코드는 다음과 같습니다. <헤드> 새 문서 <바디> </p><p><div>{{name}} 내용: {{message}} </div> <p></p> <br> </BODY><br> </HTML><br> <p>콘텐츠가 포함된 새 custom.js 파일 만들기: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63702" class="copybut" id="copybut63702" onclick="doCopy('code63702')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code63702"> <br> // 뷰/컨트롤/모델을 관리하는 전역 클래스입니다<br> var 앱 = {<br> 모델: {},<br> 조회수: {},<br> 컨트롤러: {},<br> 컬렉션: {},<br> 초기화: 함수() {<br> 새로운 App.Controllers.Routes();<br> Backbone.history.start() // 모든 Backbone 프로그램을 구동하기 위해서는 Backbone.history.start()가 필요하다. <br> }<br> };<br> App.Models.Hello = Backbone.Model.extend({<br> URL: 함수() {<br> return '/api.php'; // 데이터의 백엔드 주소를 가져옵니다. <br> },<br> 초기화: 함수() {<br> This.set({'message':'hello world'}); // 프론트엔드는 메시지 필드를 정의하고, 이름 필드는 백엔드에서 제공됩니다. <br> }<br> });<br> App.Views.Hello = Backbone.View.extend({<br> 엘: $("body"),<br> 템플릿: $("#<span style="font-family: monospace; white-space: pre; ">hello-container-template</span>").html(),<br> 초기화: 함수(옵션){<br> this.options = 옵션;<br> this.bind('change', this.render);<br> this.model = this.options.model;<br> },<br> render: function(){ // render 메서드에는 두 가지 목표만 있습니다. this.el을 채우고 체인 작업을 위해 이것을 반환하는 것입니다. <br> $(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );<br> 이거 돌려줘<br> }<br> });<br> App.Controllers.Routes = Backbone.Controller.extend({<br> 경로: {<br> "!/hello" : "hello",//라우팅을 구동하려면 #!/hello를 사용하세요<br> },<br> 안녕하세요 : function() {<br> //새 모델을 생성합니다. 모델이 백엔드에서 업데이트된 콘텐츠를 성공적으로 요청한 후 모델을 기반으로 새 페이지를 렌더링합니다. <br> var helloModel = new App.Models.Hello;<br> helloModel.fetch({<br> 성공: 함수(모델){<br> var helloView = new App.Views.Hello({모델: 모델});<br> helloView.trigger('change');<br> }<br> })<br> }});<br> App.initialize();<br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
