我正在构建的应用程序使用Ember.js和Raphael.js.由于我是Ember.js的新手,我在理解如何将两者结合在一起时遇到了一些问题.我已经看过
this demo了,但这只是让我的一部分.
让我以这种方式说出我的问题：
我们以“todo” demo from Ember.js’s documentation为例.如何将图像与每个待办事项相关联,并在待办事项未完成时将该图像显示在Raphael绘图画布上？为了澄清,只有一个拉斐尔绘图表面显示所有图像.
就像在Ember.js演示中一样,我想使用灯具来获取我的待办事项信息,但我想添加一个图像字段：
Todos.Todo.FIXTURES = [
{
id: 1,title: 'Learn Ember.js',isCompleted: true,image: 'some.png'
},{
id: 2,title: '...',isCompleted: false,image: 'some_other.png'
}
];
请耐心等待,因为我没有接触过Ember.js.我需要知道
>在何处以及如何初始化Raphael绘图表面
>如何将图像添加到绘图表面,
>如何根据关联任务的isCompleted值切换图像的可见性.
解决方法
无论您存储图像完成数据的对象是什么,您都需要具有响应完成状态更改的观察器功能.在该函数中,您可以执行任何必要的操作来添加/删除raphael中的图像. (对不起,我不知道raphael因此无法确切地告诉你该函数包含的内容).
观察者每次都会被调用到Object.set(‘imageCompleted’,true / false);
例：
App.RaphaelPainter = Ember.Object.extend({
imageCompleted:null,paintOnRaphaelCanvas:function(){
if(this.get('imageCompleted')){
// erase the image from raphael
}
else {
// add the image to raphael
}
}.observes('imageCompleted')
});
