在Raphael.js中使用Ember.js:如何将Ember对象与Raphael对象相关联？

Question

我正在构建的应用程序使用Ember.js和Raphael.js.由于我是Ember.js的新手,我在理解如何将两者结合在一起时遇到了一些问题.我已经看过这个演示,但这只是让我的一部分.

让我以这种方式说出我的问题:

我们以Ember.js文档中的"todo"演示为例.如何将图像与每个待办事项相关联,并在待办事项未完成时将该图像显示在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.我需要知道

1. 在哪里以及如何初始化拉斐尔绘图表面
2. 如何将图像添加到绘图表面,
3. 如何根据关联任务的isCompleted值切换图像的可见性.

Answer 1

无论您在哪个对象中存储图像完成数据，都需要有一个观察者函数来响应完成状态的变化。在该函数中，您将执行任何必要的操作来添加/删除 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')
  });