尝试在Ember Starfield组件中使用HTML5和Javascript
[英]Trying to use HTML5 and Javascript within Ember, Starfield component
问题描述
I made a basic starfield program that loads into a canvas using javascript. 
我制作了一个基本的starfield程序，该程序使用javascript加载到画布中。
http://jsfiddle.net/vLfG2/ http://jsfiddle.net/vLfG2/
I've been trying to incorporate it into an ember site by putting the canvas onto a page, but I'm not sure how to load the program in. I've tried including the code into the page's router, controller, load it from a separate file, etc. Not really sure where to go from here. 我一直在尝试通过将画布放在页面上来将其合并到ember站点中，但是我不确定如何加载程序。我尝试将代码包含到页面的路由器，控制器中，并从中加载一个单独的文件等。不太确定从何处去。 Any pointers? 有指针吗？
I assume I can just use... 我想我可以用...
<!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>
For the HTML. 对于HTML。
And then... 接着...
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.route('starfield');
});
for the app file. 用于应用程序文件。 But where do I put the star field's code? 但是，我应该将星空代码放在哪里？
1 个解决方案
解决方案1
1 已采纳 2014-06-20 15:36:42
Update 更新
Now that I see what you're trying to do, I'd totally componentize it 现在，我了解了您的工作意图，然后将其完全组件化
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);
}
});
And then in a template you can insert remove super easily 然后可以在模板中轻松插入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}}
Static variables: http://emberjs.jsbin.com/yaxoweya/8/edit 静态变量： http : //emberjs.jsbin.com/yaxoweya/8/edit
Bound variables: http://emberjs.jsbin.com/yaxoweya/9/edit 绑定变量： http : //emberjs.jsbin.com/yaxoweya/9/edit
Original answer (not really applicable, but good info nonetheless) 原始答案（不是真的适用，但是信息不错）
For the model, you would set up a route matching your router's name. 对于模型，您将设置与路由器名称匹配的路由。 If your route is a noun, generally you use this.resource , if it's a verb you use this.route 如果您的路线是一个名词，通常使用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'];
}
});
Route for the particular route in your app 应用中特定路线的路线
App.StarfieldRoute = Em.Route.extend({
model:function(){
return {apple:'cow'};
}
});
Controller for wrapping your model, and interacting with the view/template 用于包装模型以及与视图/模板进行交互的控制器
App.StarfieldController = Em.ObjectController.extend({
foo:'bar'
});
View for dom interaction 查看dom互动
App.StarfieldView = Em.View.extend({
click: function(){
alert('you clicked this view!');
}
});
http://emberjs.jsbin.com/nodojasu/3/edit http://emberjs.jsbin.com/nodojasu/3/edit
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.