6

だから、私はちょっと初めてでEmber.js、これにこだわってから数時間経ちました。私はこのbloggr クライアントで遊んでいます。達成したいことは、これらのhandlebarsテンプレートを外部ファイルからロードすることです。

「about」テンプレートは、ユーザーがパネルの about ページをクリックしたときにレンダリングする必要があります。ここに短いコードがあるので、それほど掘り下げる必要はありません（経験豊富なユーザーにとっては簡単だと思います）

中のテンプレート。html例に示すように

<script type="text/x-handlebars" id="about">
<div class='about'>
  <p>Some text to be shown when users click ABOUT.</p>
</div>

今私がやったことは、そのx-handlebarコードをhtmlページから取り除き、それを（なしで<script type...>）配置してから配置することですhbs/about.hbs

さて、htmlページの中で私はこのようなことをしました。

$.ajax({
    url: 'hbs/about.hbs',         
    async: false,
    success: function (resp) {
      App.About = Ember.View.extend({
        template: Ember.Handlebars.compile(resp),
      });
    }         
  });

ajax の結果は .hbs ページのコンテンツを保持します。それEmberをレンダリングできるようにコンパイルする必要がありますよね? それが私がしたことだと思います。しかし、これは私が来た限りです。私がしたことは正しいですか？次の動きは何ですか？私は ajax 呼び出しの内容を約に追加する必要があると思いますbody。

SOを検索した後も、まだ実行できませんでした。

4

1 に答える 1

12

次のように、使用可能なテンプレートのオブジェクトにテンプレートを添付できます。

Ember.TEMPLATES.cow = Ember.Handlebars.compile("I'm a cow {{log this}}");

または、あなたの場合、おそらく次のようなものです：

var url = 'hbs/about.hbs',
    templateName = url.replace('.hbs', '');

Ember.$.ajax({
  url: url,         
  async: false,
  success: function (resp) {
    Em.TEMPLATES[templateName] = Ember.Handlebars.compile(resp);
  }         
});

これは、準備が整ったアプリケーションで行われる怠惰な例です。

http://emberjs.jsbin.com/apIRef/1/edit

正直なところ、テンプレートを事前に (サーバー側で) プリコンパイルした方が、エンド ユーザーにとってパフォーマンスが向上します。

プリコンパイルは生のハンドルバーを取得し、ビューを構築するときに使用する大量の JavaScript ステートメントに変換します。

DOM の準備が整うと、Ember は DOM をスキャンして「text/x-handlebars」タイプのスクリプト要素を探し、その内容に対して compile を呼び出します。Ember.TEMPLATES次に、data-template-name 属性の名前を持つオブジェクトに結果を追加します。これにより、アプリケーションにまったく不要なロード時間が追加される可能性があります。

たとえば、「I'm a cow {{log this}}」を送信すると、次の JavaScript メソッドに変換されました

function anonymous(Handlebars,depth0,helpers,partials,data /**/) {
  this.compilerInfo = [4,'>= 1.0.0'];
  helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', hashTypes, hashContexts, escapeExpression=this.escapeExpression;

  data.buffer.push("I'm a cow ");
  hashTypes = {};
  hashContexts = {};
  data.buffer.push(escapeExpression(helpers.log.call(depth0, "", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data})));
  return buffer;
}

次のような醜いものに最小化されます：

function anonymous(e,t,n,r,i){this.compilerInfo=[4,">= 1.0.0"];n=this.merge(n,Ember.Handlebars.helpers);i=i||{};var s="",o,u,a=this.escapeExpression;i.buffer.push("I'm a cow ");o={};u={};i.buffer.push(a(n.log.call(t,"",{hash:{},contexts:[t],types:["ID"],hashContexts:u,hashTypes:o,data:i})));return s}

バックエンドが何であるかに応じて、事前にテンプレートをコンパイルしてバンドルし、html で送信して、クライアント側のテンプレートのコンパイルに時間を費やさないようにすることができます。

于 2013-11-09T01:32:15.890 に答える