javascript - 将Ember.js与Raphael.js结合使用: How to associate Ember objects with Raphael objects?

我正在构建的应用程序使用Ember.js和Raphael.js。由于我是Ember.js的新手，因此在了解如何将两者结合在一起时遇到了一些问题。我已经看过this demo，但这只是让我参与其中。

让我这样说我的问题:

让我们以"todo" demo from Ember.js's documentation为例。当待办事项未完成时，如何将图像与每个待办事项相关联，并在Raphael绘图 Canvas 上显示该图像？为了澄清起见，只有1个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')
  });

关于javascript - 将Ember.js与Raphael.js结合使用: How to associate Ember objects with Raphael objects?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17872316/