html 페이지의 렌더링이 작동하지 않습니다.

Question

Backbonejs 프레임 워크를 사용하고 있습니다. 이 프레임 워크에서 Backbonejs, requirejs, underscore 및 text.js를 사용하는 app.js를 만들었습니다. div에 html 페이지를로드하고 싶습니다. 콘솔에 html 페이지가로드되어 있지만 화면의 특정 페이지를 볼 수 없다고 표시됩니다.

다음은 내가 메인 화면 (index.html을)에 home.html을로드하고 싶은 app.js

define(function (require) { 

    // "use strict"; 

    var $ = require('jquery'), 
     underscore = require('assets/js/underscore'), 
     Backbone = require('assets/js/backbone'), 
     tpl = require('text!Views/home.html'), 

     template = _.template(tpl); 

    return Backbone.View.extend({ 
     render: function() { 
      el: '#banner', 
      this.$el.html(template()); 
      return this;  
     } 
    }); 
}); 

입니다. index.html에서이 app.js를 호출했습니다. 콘솔에 다음과 같은 XHR로드가 완료되었습니다. GET "file : /// D : /Project1/Views/home.html" 하지만 내 index.html 페이지에이 항목이 표시되지 않습니다. 012.html

Answer 1

숫자가 있습니다. 코드 문제.

1. 백본보기 인스턴스화 할 필요가
2. 엘이보기의 인스턴스를 만드는 방법에 대한 호출하는 초기화 기능 (내에서 수동으로 또는에서,
3. 기능 렌더링 함수가 호출 될 필요가 렌더링 외부 정의 될 필요가
)
4. 전체 구조는 잘 쓰여져 있지 않지만이 문제의 범위를 벗어나므로이를 수정하지는 않습니다.

확인이 바이올린 : http://jsfiddle.net/rahulsv/c4dveax9/

var tpl = "<div>hello world</div>"; 
var template = _.template(tpl); 
(function(){ 
    var View = Backbone.View.extend({ 
     el: '#banner', 
     initialize: function(){ 
      this.render(); 
     }, 
     render: function() { 
      this.$el.html(template()); 
     } 
    }); 
    var v = new View(); 
})(); 

그것이 도움이되기를 바랍니다.

업데이트 :

템플릿 파일 :

<!-- pod.html --> 
<h2><%= title %></h2> 
<p><%= body %></p> 

를 액세스

다음과 같이 당신은 그것을 할 수 있습니다 (당신이 그것을 사용하고 있기 때문에) requireJs을 사용하여 파일에서 템플릿에 액세스하려면 JS의 템플릿 :

// view.js 
define(["text!templates/pod.html"], function(pod) { 
    var View = Backbone.View.extend({ 
    template: _.template(pod) 
    }); 
}); 

참조 용으로이 링크 확인 : http://kilon.org/blog/2012/11/3-tips-for-writing-better-backbone-views/