16

Ember を使用していますが、ビューが div 要素内ではなく、HTML DOM の一番下にレンダリングされます。ここに私のソースコードがあります:

index.html :

<body>
  <div id="test">
    <script type="text/x-handlebars">
      {{view Skills.RecommendedSkillsListView}}
    </script>
  </div>

  <script type="text/x-handlebars" data-template-name="recommended_skills_list">
  <a href="#" {{action "b"}}>DO A NEW THING</a>
  </script>

  <script src="js/libs/jquery-1.8.3.min.js"></script>
  <script src="js/libs/handlebars-1.0.rc.1.js"></script>
  <script src="js/libs/ember-1.0.0-pre.2.js"></script>
  <script src="js/app.js"></script>
</body>

app.js :

Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
  templateName: 'recommended_skills_list',
  b: function(v) {
      alert('new hello');
  }    
});
Skills.initialize();

レンダリングされたドキュメント: 

<body class="ember-application">
  <div id="test"></div>

  <script src="js/libs/jquery-1.8.3.min.js"></script>
  <script src="js/libs/handlebars-1.0.rc.1.js"></script>
  <script src="js/libs/ember-1.0.0-pre.2.js"></script>
  <script src="js/app.js"></script>

  <div id="ember135" class="ember-view">
    <div id="ember140" class="ember-view">
      <a href="#" data-ember-action="1">DO A NEW THING</a>
    </div>
  </div>
</body>

注: 以前のバージョンの ember (0.9.5) で同じコードを使用すると、期待どおりに動作します

4

2 に答える 2

22

ああ、Ember が検索する「アプリケーション」テンプレート名を指定した本文に「ビューを追加」しているようです。body 内に div を配置して、Ember.Application.create(); でこれを参照してみませんか?

Ember.ルーター

Skills = Ember.Application.create({
  rootElement: '#test'
});

意見

<body>
  <div id="test"></div>

  <script src="js/libs/jquery-1.8.3.min.js"></script>
  <script src="js/libs/handlebars-1.0.rc.1.js"></script>
  <script src="js/libs/ember-1.0.0-pre.2.js"></script>
  <script src="js/app.js"></script>

  <div id="ember135" class="ember-view">
    <div id="ember140" class="ember-view">
      <a href="#" data-ember-action="1">DO A NEW THING</a>
    </div>
  </div>
</body>

ポイントを逃した場合はお知らせください;）

于 2013-01-11T18:22:19.550 に答える
11

rootElementアプリケーションの( docs here、関連する質問: Emberjs rootElement ) プロパティを使用して、アプリケーションをレンダリングする要素を指定する必要があります。

Skills = Ember.Application.create({
    rootElement: "#test"
});

これが実際の例です: jsfiddle の例

例からのレンダリングされた出力:

<body>
  <div id="test" class="ember-application">
    <div id="ember135" class="ember-view">
      <div id="ember140" class="ember-view">
        <a href="#" data-ember-action="1">DO A NEW THING</a>
      </div>
    </div>
  </div>
</body>
于 2013-01-11T19:15:48.210 に答える