에서 프로그래밍 핸들 템플릿을 정의 나는이스크립트 태그로 핸들 막대 템플릿을로드 할 수 있습니까? 단순히 충분히 내 html 파일</p> <p>에 내 모든 핸들 템플릿을 정의하지 않으 Ember.js
<script type="text/x-handlebars" data-template-name="nav-bar" src="template.handlebar"></script>
을 시도하지만이 작동하지 않았다. 템플릿을 프로그래밍 방식으로 정의하거나 핸들 바 파일을로드하여 재사용 할 수 없으며 좀 더 유지 관리가 용이하다고 생각합니다.
그냥 아약스로로드하고 머리에 추가해 봤는데 제대로 작동하지만 엠버가 이미로드되고 템플릿이 정의되지 않은 후에 엠버.js가 읽지 않습니다.
당신은또는 프로그래밍 방식 Ember.js에 핸들 템플릿을 정의
Ember.Handlebars.compile를 사용하여 템플릿을 프로그래밍 방식으로 정의 할 수 있습니다
는 http://jsfiddle.net/pangratz666/wxrxT/ 참조 배열, http://jsfiddle.net/pangratz666/58tFP/ 참조 :
Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');
Ember.View.create({
personName: 'Dr. Tobias Fünke',
templateName: 'myFunkyTemplate'
}).append();
나는 리처드 밀란 진술 같은 몇 가지 도구를 사용하는 것이 좋습니다. 또한 템플릿 편집을 지원하는 interline/ember-skeleton을 살펴보십시오. 난 아직도 내 템플릿에 대해 별도의 파일을 원하고 내가 자바 스크립트 문자열에서 그들을 정의하지 않았기 때문에
가능하지만 먼저 템플릿을 사전 컴파일해야합니다. 또한 하나의 파일에 모든 템플릿을 포함 할 수 있습니다.
을 따를 수 있습니다, 당신은 자바 스크립트 파일을 포함해야합니다.
Ember.View.create({
personName: 'Dr. Tobias Fünke',
template: Ember.Handlebars.compile('Hello {{personName}}')
}).append();
을 또는 당신은 Ember.TEMPLATES로 컴파일 된 템플릿을 추가 :
<script src="path/to/compiled/templates.js" type="text/javascript"></script>
Ember를 컴파일 할 수 있다고 생각하지 않습니다 .Handlebars 표준 핸들 바 도구가 있습니다. – thesmart
는 그래서 그것은, 모든 템플릿을 동기 게으른 로더에로드되어이 함께 지난 밤
해킹 먼저, 다음 엠버 내 코드의 나머지
//fake function so that every loads fine will get redefined in application.js
function initializeApp(){}
function loadTemplates(){
var arg = arguments[0],
next = Array.prototype.slice.call(arguments,1);
if(typeof arg != 'string'){
arg()
}else{
var scriptObj = document.createElement('script');
scriptObj.type = 'text/x-handlebars';
$(scriptObj).attr('data-template-name', arg.replace('.handlebars', '').substring(arg.lastIndexOf('/')+1))
$.get(arg, function(data){
scriptObj.text = data;
document.head.appendChild(scriptObj);
if(next.length > 0) loadTemplates.apply(this, next);
});
}
}
function loadScripts() {
var script = arguments[0],
scriptObj = document.createElement('script'),
next = Array.prototype.slice.call(arguments,1);
scriptObj.type = 'text/javascript';
scriptObj.src = script;
scriptObj.onload = scriptObj.onreadystatechange = (next.length > 0) ? function(){loadScripts.apply(this, next)} : function(){$(document).ready(function() {initializeApp()})};
document.head.appendChild(scriptObj);
}
function loadApp(obj){
loadTemplates.apply(this, obj.templates.concat(function(){loadScripts.apply(this,obj.scripts)}))
}
window.onload = function(){
loadApp({
templates:
[
'/javascripts/views/templates/nav-bar.handlebars',
],
scripts:
[
'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGoogleMaps',
'/javascripts/lib/bootstrap.js',
'/javascripts/lib/rails.js',
'/javascripts/lib/ember.js',
'/javascripts/application.js',
'/javascripts/views/nav_bar.js',
]
})
}
편집 : 나는 그것을 정리하고 그것은 단지
고맙습니다. 너는 내 하루를 보냈다! :-) –
그것은 가능합니다하지만 크롬에서 테스트를 제대로 만들어 그래, 당신은하지 않고 그것을 할 수 있습니다 또 다른 또 다른 도구의 사용, 우리만의 ember.js와 다른 것은 없습니다. 나는 이것을 좋아했다 :
1) html 코드. 그 중 하나를 사용하기 전에 모든 핸들 바 파일을로드해야합니다. 여기, handlebars라는 파일 하나만 있습니다.JS
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/ember-0.9.8.1.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/app.js"></script>
</body>
2)이 파일 handlebars.js는 타다 남은
var src = "Hello, <b>{{name}}</b>";
Em.TEMPLATES["say-hello"] = Em.Handlebars.compile(src);
3의 컴파일러를 사용)하고 사용할 수 있었던 것처럼 다음 app.js 파일 내부에, 단지 (사용, 다음을 포함) :
Ember를로드하기 전에 템플릿을 DOM에로드하면 템플릿을 컴파일하거나 등록 할 필요가 없습니다. 엠버가 뒤따라 올거야. 이후 엠버 1.0.0-pre.3이 :
http://weboriented.wordpress.com/2012/09/02/loading-handlebars-templates-in-ember-using-curl-js/
또한 엠버보기를 얻을
Em.View.reopen({
templateForName: function(name, type) {
if (!name) { return; }
var templates = Em.get(this, 'templates'),
template = Em.get(templates, name);
if (!template) {
$.ajax({
url: 'templates/%@.hbs'.fmt(name),
async: false
}).success(function(data) {
template = Ember.Handlebars.compile(data);
});
}
if (!template) {
throw new Em.Error('%@ - Unable to find %@ "%@".'.fmt(this, type, name));
}
return template;
}
});
UPDATE에 대한 템플릿을로드 패치 할 수 있습니다 : 여기
는 문서에서는 보여주고있다 해결책이 더 이상 필요하지 않습니다. (어쩌면 최근 Ember로 마이그레이션 할 수 있습니다)최근 Ember.js로이 작업을 수행하는 방법을 아는 사람이 있습니까? – Alp
동기 요청은 이제 쓸모없는 것으로 간주됩니다. http://xhr.spec.whatwg.org/#sync-warning –
Ember보기/구성 요소 안에 또 다른 해결책이 있습니다.
var viewClass = Ember.View.extend({ templateName: this.get('contentTemplate') });
var view = this.createChildView(viewClass);
var html = view.renderToBuffer().buffer;
이 질문은 오래된 질문이므로 모든 답변이 구형입니다. Ember CLI 템플릿은 명명 규칙에 따라 require.js 모듈로 자동로드됩니다. 제안 된 ES6 가져 오기 구문을 작성하고 빌드를 require.js 구문으로 바꾸기 때문에 약간 이상합니다.하지만 실제로 잘 작동합니다.
아 맞아! 이것은 – timanema
의 종류를 찾고 있던 물건의 종류입니다 Ember CLI는 또 다른 훌륭한 옵션입니다. –
Ember의 최신 버전 (작성 당시 v1.8)에서 구문이 {{view.personName}}으로 약간 변경되었습니다. Checkout my jsbin : http://emberjs.jsbin.com/soqore/2/edit – Paul