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

Trying to use HTML5 and Javascript within Ember, Starfield component

本文关键字：HTML5 Javascript 组件 Ember Starfield      更新时间：2023-09-26

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

http://jsfiddle.net/vLfG2/

我一直试图把它纳入一个烬网站通过把画布到一个页面，但我不知道如何加载程序。我试过将代码包括到页面的路由器，控制器，从一个单独的文件加载，等等。不知道接下来该怎么做。指针吗?

我想我可以用…

<!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>

,然后……

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.route('starfield');
});

表示应用程序文件。但我该把星号字段的代码放在哪里呢?

更新

现在我知道你想做什么了，我完全可以把它组件化

 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);
  }
});

在模板中你可以很容易地插入remove 

{{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

相关文章：