我已经开始使用ember cli开发一个ember JS应用程序。 现在的想法是通过保持点击的坐标来创建svg元素(圆圈)。
我使用视图捕获鼠标单击,然后将其传递给控制器以创建带坐标的圆。 我使用夹具适配器来存储数据。
我在代码中手动放置的元素在我显示时工作正常。 当我想用我的控制器存储一个新节点时会出现问题,我收到以下错误:
Uncaught TypeError: Cannot read property 'createRecord' of null
这是控制器文件svg.js:
export default Ember.ObjectController.extend({
actions:{
createNode: function(posX,posY){
var element= this.store.createRecord('element',{ //Here is where I get the error
text: "element",
x: posX,
y: posY,
graph: 1
});
element.save();
}
}
});
这是我的模板文件:
{{#view svg}}
{{#each item in model}}//For each graph
{{#each item.elements}}// For each
<circle {{bind-attr cx=x}} {{bind-attr cy=y}} r="5" stroke="black" stroke-width="3" fill="yellow" />
{{/each}}
{{/each}}
{{/view}}
相关路线:
export default Ember.Route.extend({
model: function() {
return this.store.find('graph');
}
});
视图文件:
export default Ember.View.extend({
tagName: "svg",
attributeBindings: ['width','height'],
width: "500",
height: "500",
init: function() {
this._super();
this.set("controller", svg.create());
},
click: function(evt){
var svg= Ember.$("svg:first");
var posX = evt.pageX - svg.position().left;
var posY = evt.pageY - svg.position().top;
this.get('controller').send('createNode',posX,posY);
}
});
也许我做错了什么,但我不知道为什么this.store
会为空。
有什么想法吗?
提前致谢!
答案 0 :(得分:3)
糟糕,我没有看到你在init中做了什么。控制器需要由容器初始化,以便依赖注入与它们一起工作。依赖注入将存储注入控制器和路由。
在2.0中不推荐使用控制器我只是说你的动作从你的控制器转移到容纳那个视图的路径/控制器。您还必须将商店传递到视图中如果您不想这样做,您可以在创建时在控制器上手动定义商店。
{{#view svg store=store}}
App.inject('view', 'store', 'store:main');