Sử dụng Ember.js bằng Raphael.js: Cách liên kết các đối tượng Ember với các đối tượng Raphael?

Question

Ứng dụng tôi đang xây dựng sử dụng Ember.js và Raphael.js. Vì tôi mới làm quen với Ember.js, tôi đang gặp một số vấn đề để hiểu cách kết hợp cả hai. Tôi đã thấy this demo, nhưng điều đó chỉ giúp tôi trở thành một phần của con đường.

Hãy để tôi cụm từ câu hỏi của tôi theo cách này:

Hãy lấy ví dụ "todo" demo from Ember.js's documentation làm ví dụ. Làm thế nào tôi có thể kết hợp một hình ảnh với từng mục todo, và có hình ảnh được hiển thị trên một khung vẽ Raphael khi mục todo chưa hoàn thành? Để làm rõ, chỉ có 1 bề mặt vẽ Raphael nơi tất cả các hình ảnh được hiển thị.

Cũng giống như trong bản demo Ember.js, tôi muốn sử dụng đồ đạc để biết thông tin todo của tôi, nhưng tôi muốn thêm một ảnh lĩnh vực:

Todos.Todo.FIXTURES = [ 
    { 
    id: 1, 
    title: 'Learn Ember.js', 
    isCompleted: true, 
    image: 'some.png' 
    }, 
    { 
    id: 2, 
    title: '...', 
    isCompleted: false, 
    image: 'some_other.png' 
    } 
]; 

Xin hãy kiên nhẫn với tôi vì tôi không có nhiều sự tiếp xúc với Ember.js. Tôi cần phải biết

1. ở đâu và làm thế nào để khởi tạo Raphael vẽ bề mặt
2. Làm thế nào để thêm hình ảnh vào bề mặt vẽ,
3. Làm thế nào để chuyển tầm nhìn của một hình ảnh dựa trên giá trị isCompleted nhiệm vụ liên quan đến nhân.

Answer 1

Bất kỳ đối tượng nào bạn lưu trữ dữ liệu hoàn thành hình ảnh, bạn cần có chức năng quan sát phản hồi các thay đổi trong trạng thái hoàn thành. Trong chức năng đó, bạn sẽ làm bất cứ điều gì là cần thiết để thêm/xóa hình ảnh khỏi raphael. (xin lỗi, tôi không biết raphael nên không thể cho bạn biết chính xác chức năng đó chứa gì).

Người quan sát sẽ được gọi mỗi lần vào Object.set ('imageCompleted', true/false);

Ví dụ:

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') 
    });