활성 부분 외부 파일

Question

나는 매우 복잡한 웹 페이지를 가지고 있는데, Ractive를 사용하여 빌드하려고합니다.
많은 부분 템플릿이 포함되어 있습니다.
코드를 깨끗하게 유지하기 위해 별도의 파일에서 부분을로드하려고합니다.

예 :

<script id='content' type='text/ractive'> 
Hello! 
</script> 

http://jsfiddle.net/efrsmqhd/

어떻게 내가 별도의 파일에 '콘텐츠'를 넣을 수 있습니다?

Answer 1

Ractive가 부분 검색을 시도 할 때 - {{>foo}}라고 말하면 - 먼저 ractive.partials.foo을 찾습니다. 그런 다음 ractive.partials[valueOfFoo]을 찾습니다. 따라서 ractive.get('foo') === 'bar' 인 경우 ractive.partials.bar을 찾습니다.

오류가 발생한 경우에만 <script id='foo'>을 찾습니다. 그래서 당신과 같이, 명시 적으로 파셜에 전달할 수 있습니다

var ractive = new Ractive({ 
 
    el: 'main', 
 
    template: '{{>foo}}', 
 
    partials: { 
 
    foo: '<p>this is a <strong>foo</strong> partial</p>' 
 
    } 
 
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
 
<main></main>

당신이 페이지에 여러 Ractive 인스턴스가있는 경우, 그들은과 같이 파셜을 공유 할 수 ractive.partials의 프로토 타입, Ractive.partials입니다 :

Ractive.partials.foo = '<p>this is a <strong>foo</strong> partial</p>'; 
 

 
var ractive = new Ractive({ 
 
    el: 'main', 
 
    template: '{{>foo}}' 
 
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
 
<main></main>

따라서 부분 파일을 별도의 파일로 유지하는 것은 AJAX를 통해 파일을로드하고 new Ractive()에 전화 할 때 전달하는 것과 같이 간단합니다. 물론, 별개의 파일이 많이있는 경우에는 전에 앞에로드해야하기 때문에 더 복잡해집니다. new Ractive()으로 전화 할 수 있습니다. 이 모든 비동기 활동을 조정하는 방법에는 여러가지가 있지만 가장 쉬운 방법은 사용하는 Promises입니다 - 여기에 window.fetch polyfill 사용하는 예입니다 :

var ractive, partials = {}, promises; 

promises = [ 'foo', 'bar', 'baz' ].map(function (name) { 
    return fetch('templates/' + name + '.html').then(function (response) { 
    return response.text().then(function(text) { 
     partials[ name ] = text; 
    }); 
    }); 
}); 

Promise.all(promises).then(function() { 
    ractive = new Ractive({ 
    el: 'body', 
    template: '#template', 
    partials: partials 
    }); 
}); 

Answer 2

감사 리치 -이 정확히 내가 찾고 있던 것입니다 . 전에 보지 않은 가져 오기 그러나, 나는 가져온 html 시체를받지 못했습니다. 대신 [[PromisesValue]]이라는 키에 html을 포함하는 이상한 표정의 중첩 객체 *를 받았습니다. 그래서 나는 약간 사물을 리팩터링했다.

이렇게하면 response.text가 반환되고 partials에 놓입니다. D

promises = [ 'foo' , 'bar' ,'baz' ].map(function (name) { 
     return fetch('templates/' + name + '.html').then(function (response) { 
     return response.text() 
     }).then(function(body) { 
     partials[name] = body; 
     }); 
    }); 


    Promise.all(promises).then(function() { ... 

* 그것의 Chromes 디버거에서 이상한 보았다 : 지금은 별도의 파일에있는 모든 내 템플릿 (약 30까지)이있다. 나의 다음 일은 억압적인 구성 요소를 깨우는 것이다.