更新

Question

我制作了一个基本的星空程序，使用javascript加载到画布中。

我一直试图通过将画布放到页面上将其合并到一个ember站点，但我不知道如何加载程序。我已经尝试将代码包含在页面的路由器，控制器中，从单独的文件加载它等。不确定从这里去哪里。有什么指针吗？

我假设我可以使用......

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/app.js"></script>

  </script>
</head>
<body>

...

<script type="text/x-handlebars" id="starfield">
  <canvas id='c'></canvas>
</script>

</body>
</html>

对于HTML。

然后......

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.Router.map(function() {

this.route('starfield');

});

为app文件。但是我在哪里放置星域的代码？

Answer 1

更新

现在，我看到你正在尝试做什么，我完全将它组件化

 App.StarFieldComponent = Em.Component.extend({
  tagName:'canvas',
  width: 400,
  height: 300,
  starCount:100,
  refresh:30,
  attributeBindings:['width', 'height'],
  stars:null,
  on:false,

  build: function(){
    var canvas = this.$()[0],
        ctx = canvas.getContext('2d'),
        stars = [],
        height = this.get('height'),
        width = this.get('width');

    for (var i = 0, len = this.get('starCount'); i < len; i++){
      stars.push([Math.random() * width, Math.random() * height, Math.random() * 2, 0.5 + Math.random() / 2]);
    }

    this.set('stars', stars);
    this.set('ctx', ctx);
    this.set('on', true);
  }.on('didInsertElement').observes('starCount', 'width', 'height'),

  kill: function(){
    this.set('on', false);
  }.on('willDestroyElement'),

  clear: function () {
    var ctx = this.get('ctx'),
        height = this.get('height'),
        width = this.get('width');
    ctx.fillStyle = 'black';
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.rect(0, 0, width, height);
    ctx.closePath();
    ctx.fill();
  },
  drawStars: function () {
    var stars = this.get('stars'),
        starCount = stars.length,
        ctx = this.get('ctx');
    for (var i = 0; i < starCount; i++) {
        ctx.fillStyle = 'rgba(255, 255, 0, ' + stars[i][3] + ')';
        ctx.beginPath();
        ctx.arc(stars[i][0], stars[i][1], stars[i][2], 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }
  },
  moveStars :function (e) {
    var stars = this.get('stars'),
        starCount = stars.length,
        height = this.get('height'),
        width = this.get('width');;
    for (var i = 0; i < starCount; i++) {
        if (stars[i][1] - stars[i][2] > height) {
            stars[i][0] = Math.random() * width;
            stars[i][2] = Math.random() * 2;
            stars[i][1] = 0 - stars[i][2];
            stars[i][3] = 0 + Math.random() / 2;
        } else {
            stars[i][1] += e;
        }
    }
  },
  gaze: function(){
    if(this.get('on')){
      this.loop();
    }
  }.observes('on'),
  loop: function () {
    if(!this.get('on')){
      return;
    }
    var refreshRate = this.get('refresh');
    this.clear();
    this.moveStars(3);
    this.drawStars();
    Em.run.later(this, this.loop, refreshRate);
  }

});

然后在模板中，您可以轻松插入删除

{{star-field width=300 height=200 starCount=20}}
{{star-field width=400 height=200 starCount=500 refresh=10}}
{{star-field width=100 height=100}}
{{star-field}}

静态变量：http://emberjs.jsbin.com/yaxoweya/8/edit

绑定变量：http://emberjs.jsbin.com/yaxoweya/9/edit

原始答案（不是真的适用，但仍然是好的信息）

对于模型，您将设置与路由器名称匹配的路由。如果您的路线是名词，通常使用this.resource，如果是verb则使用this.route

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('starfield')
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

您应用中特定路线的路线

App.StarfieldRoute = Em.Route.extend({
  model:function(){
    return {apple:'cow'};
  }
});

用于包装模型并与视图/模板进行交互的控制器

App.StarfieldController = Em.ObjectController.extend({
  foo:'bar'
});

观看dom互动

App.StarfieldView = Em.View.extend({
  click: function(){
    alert('you clicked this view!');
  }
});

http://emberjs.jsbin.com/nodojasu/3/edit

尝试在Ember，Starfield组件中使用HTML5和Javascript

1 个答案:

更新

原始答案（不是真的适用，但仍然是好的信息）

您应用中特定路线的路线

用于包装模型并与视图/模板进行交互的控制器

观看dom互动