私は現在、磁気オーナメントを組み合わせるための Ember アプリを開発しています (スクリーンショットのリンクを参照してください)。
http://s7.postimg.org/9k2nq75yj/question_edit.png
左側でユーザーはカテゴリを選択し、メイン パーツ (サブカテゴリ「Unsere Halsketten」と「Unsere Armbänder」に表示される長いネックレス) または要素 (「Unsere Elemente」) と呼ばれる小さなパーツを選択することができます。 「ドロップエリア」にドロップできます。
この開発の初期段階では、ドロップ領域は、配列の内容を表示する単なる残り火コンポーネントです (テンプレート: 配列内の各項目)。ユーザーがアイテムをドロップ領域にドロップすると、その ID が dataTransfer を介して転送され、コントローラー アクション (コンポーネントから呼び出される) がアイテムをストアからフェッチして配列にプッシュします。
ネックレスには別のアイテムを追加するための 2 つの開いた接続があるため (アイテムには磁気接続があります)、目標は動的なドロップ ゾーンを持つことです。
説明します：
ユーザーがネックレス (例: "ART_HALS_1") をドロップ エリアにドロップします。コネクタが 2 つ開いているパーツで、ネックレス (大きい) であるため、ドロップ センターに表示させたいと考えています。2 つの開いた接続があるので、ドロップ センターに 2 つの追加のドロップ領域 (ドロップ左とドロップ右) を追加して、別のアイテム (要素「Unsere Elemente」など) を追加できるようにする必要があります。
これは私の最初の ember プロジェクトであるため、ここからどのように進めればよいかよくわかりません。
containerView と collectionView を読み始めましたが、良いコンセプトがわかりません。
誰かが私が進むべき道を教えてくれるなら、とても感謝しています!
最も重要なコード部分に従います。このアプリは、ember-app-kit、coffescript (以下の翻訳された JavaScript バージョン) およびテンプレート エンブレム (ハンドルバーにコンパイル) の助けを借りて作成されています。アイテムは単純な Rails API から取得されます。
項目 モデル
App.Item = DS.Model.extend
itemName: DS.attr('string')
#with the help of collection, typ and subtyp i know exactly what kind of item i got (necklace, element, armbrace...)
collection: DS.attr('string'),defaultValue: 'art_nou'
typ: DS.attr('string'),defaultValue: 'element'
subtyp: DS.attr('string'),defaultValue: 'misc'
#number of connections
noc: DS.attr('string')
price: DS.attr('string')
img: DS.attr('string'),defaultValue: '/assets/'
bigUrl:( ->
url=@get('img')
lastPart = url.split('/').pop()
return '/assets/'+'LARGE_' + lastPart
).property('url')
App.Item.reopenClass
COLLECTIONS: ['art_nou', 'cleopatra', 'balance', 'pendant','rio_de_oro','simplicity', 'styx', 'misc']
TYPES: ['mag','plug','tie']
SUBTYPES:['d1','d1_2','plug_1','plug_2','plug_3','armband','halskette','element', 'ohrring']
valid: (fields) ->
fields.itemName
ツール テンプレート (これはアプリです。ルートはありません)
section#tool
// Kategorien
#cat
h1 Kollektionen
ul
li
span.kategorie.alle click="showAll" []Alle
li
category-control action="showCollection" kategorie="art_nou" name="Art Nouveau"
li
category-control action="showCollection" kategorie="cleopatra" name="Cleopatra"
li
category-control action="showCollection" kategorie="balance" name="Balance"
li
category-control action="showCollection" kategorie="pendant" name="Pendant"
li
category-control action="showCollection" kategorie="rio_de_oro" name="Rio de Oro"
li
category-control action="showCollection" kategorie="simplicity" name="Simpliticy"
li
category-control action="showCollection" kategorie="styx" name="Styx"
//Katalog
a class="runter chevron" click="scrollDown"
img src="assets/down.png"
a class="rauf chevron" click="scrollUp"
img src="assets/up.png"
div class={showCatalogue:kat:kat showCatalogue::kat-invisible }
.container
h2
|Unsere
=kollektionActive
| Kollektion
// muss variabel werden
span.kat-text Unsere Cleopatra Kollection zeichnet sich durch den individuellen Magnetverschluss aus.
span.hr
//will be components later
if halsketten
h3 Unsere Halsketten
div.row
each item in halsketten
draggable-item item=item
div.product
div.img
img src=item.img
div.itemName
item.itemName
div.clearfix
if armbaender
h3 Unsere Armbänder
div.row
each item in armbaender
draggable-item item=item
div.product
div.img
img src=item.img
div.itemName
item.itemName
div.clearfix
if ohrringe
h3 Unsere Ohrringe
div.row
each item in ohrringe
draggable-item item=item
div.product
div.img
img src=item.img
div.itemName
item.itemName
div.clearfix
if elemente
h3 Unsere Elemente
div.row
each item in elemente
draggable-item item=item
div.product
div.img
img src=item.img
div.itemName
item.itemName
div.clearfix
.ws
bigUrl
#drop
draggable-dropzone action="addItem"
each item in speicher
img src=item.bigUrl
= outlet
footer
ツールコントローラー
App.ToolController = Ember.ArrayController.extend
# im drop bereich befindliche elemente
speicher: Em.A([])
# Katalog
showDialog: false
showCatalogue: false
isActive: false
kollektionActive: ''
halsketten: Ember.computed.filterBy('controller','subtyp','halskette')
armbaender: Ember.computed.filterBy('controller','subtyp','armband')
ohrringe: Ember.computed.filterBy('controller','subtyp','ohrring')
elemente: Ember.computed.filterBy('controller','subtyp','element')
containerTop:"0"
upVisible: (->
containerTop=@get('containerTop')
if containerTop>=0
jQuery("a.rauf").delay(200).animate {opacity: "0"},500,'swing'
return true
else if containerTop<0
jQuery("a.rauf").delay(200).animate {opacity: "1"},500,'swing'
return false
else
# alert("hmm")
).observes("containerTop")
actions:
addItem: (itemId) ->
speicher = @get('speicher')
# gedragtes item anhand von itemId im store finden
item=@store.find "item", itemId
speicher.pushObject item
# console.log(speicher)
resetTool: ->
@set 'speicher', []
showAll: ->
kollektion=@get('model')
@set 'controller', kollektion
@set 'kollektionActive', 'gesamte'
@set 'showCatalogue', true
showCollection: (collectionId,name) ->
@set 'kollektionActive', name
kollektion=@get('model')
filter=kollektion.filterBy('collection', collectionId)
@set 'controller', filter
@set 'showCatalogue', true
ドラッグ可能アイテム コンポーネント
App.DraggableItemComponent = Ember.Component.extend
classNames : [ 'draggable-item' ]
attributeBindings : [ 'draggable' ]
draggable : 'true'
dragStart: (event) ->
event.dataTransfer.setData 'text/data', @get('item.id')
draggable-dropzone コンポーネント
App.DraggableDropzoneComponent = Ember.Component.extend
classNames : [ 'draggable-dropzone' ]
classNameBindings : [ 'dragClass' ]
dragClass : 'deactivated'
dragLeave: (event) ->
event.preventDefault()
@set 'dragClass', 'deactivated'
dragOver: (event) ->
event.preventDefault()
@set 'dragClass', 'activated'
drop: (event) ->
@set 'dragClass', 'deactivated'
itemId = event.dataTransfer.getData('text/data')
@sendAction "action" , itemId
カテゴリー管理
App.CategoryControlComponent = Ember.Component.extend
# tagname:'span'
classNames : [ 'category' ]
classNameBindings: ['active']
active: false
click: (event) ->
@sendAction 'action', @get('kategorie'), @get('name')
return
WEBSERVICE js2.coffee によって翻訳された JAVASCRIPT バージョン
アイテムモデル
App.Item = DS.Model.extend({
itemName: DS.attr('string'),
collection: DS.attr('string'),
#with the help of collection, typ and subtyp i know exactly what kind of item i got (necklace, element, armbrace...)
defaultValue: 'art_nou',
typ: DS.attr('string'),
defaultValue: 'element',
subtyp: DS.attr('string'),
defaultValue: 'misc',
#number of connections
noc: DS.attr('string'),
price: DS.attr('string'),
img: DS.attr('string'),
defaultValue: '/assets/',
bigUrl: (function() {
var lastPart, url;
url = this.get('img');
lastPart = url.split('/').pop();
return '/assets/' + 'LARGE_' + lastPart;
}).property('url')
});
App.Item.reopenClass({
COLLECTIONS: ['art_nou', 'cleopatra', 'balance', 'pendant', 'rio_de_oro', 'simplicity', 'styx', 'misc'],
TYPES: ['mag', 'plug', 'tie'],
SUBTYPES: ['d1', 'd1_2', 'plug_1', 'plug_2', 'plug_3', 'armband', 'halskette', 'element', 'ohrring'],
valid: function(fields) {
return fields.itemName;
}
});
ツールコントローラー
App.ToolController = Ember.ArrayController.extend({
speicher: Em.A([]),
showDialog: false,
showCatalogue: false,
isActive: false,
kollektionActive: '',
halsketten: Ember.computed.filterBy('controller', 'subtyp', 'halskette'),
armbaender: Ember.computed.filterBy('controller', 'subtyp', 'armband'),
ohrringe: Ember.computed.filterBy('controller', 'subtyp', 'ohrring'),
elemente: Ember.computed.filterBy('controller', 'subtyp', 'element'),
containerTop: "0",
upVisible: (function() {
var containerTop;
containerTop = this.get('containerTop');
if (containerTop >= 0) {
jQuery("a.rauf").delay(200).animate({
opacity: "0"
}, 500, 'swing');
return true;
} else if (containerTop < 0) {
jQuery("a.rauf").delay(200).animate({
opacity: "1"
}, 500, 'swing');
return false;
} else {
}
}).observes("containerTop"),
actions: {
addItem: function(itemId) {
var item, speicher;
speicher = this.get('speicher');
item = this.store.find("item", itemId);
return speicher.pushObject(item);
},
resetTool: function() {
return this.set('speicher', []);
},
showAll: function() {
var kollektion;
kollektion = this.get('model');
this.set('controller', kollektion);
this.set('kollektionActive', 'gesamte');
return this.set('showCatalogue', true);
},
showCollection: function(collectionId, name) {
var filter, kollektion;
this.set('kollektionActive', name);
kollektion = this.get('model');
filter = kollektion.filterBy('collection', collectionId);
this.set('controller', filter);
return this.set('showCatalogue', true);
}
}
});
ドラッグ可能アイテム コンポーネント
App.DraggableItemComponent = Ember.Component.extend({
classNames: ['draggable-item'],
attributeBindings: ['draggable'],
draggable: 'true',
dragStart: function(event) {
return event.dataTransfer.setData('text/data', this.get('item.id'));
}
});
ドラッグ可能ドロップゾーン コンポーネント
App.DraggableDropzoneComponent = Ember.Component.extend({
classNames: ['draggable-dropzone'],
classNameBindings: ['dragClass'],
dragClass: 'deactivated',
dragLeave: function(event) {
event.preventDefault();
return this.set('dragClass', 'deactivated');
},
dragOver: function(event) {
event.preventDefault();
return this.set('dragClass', 'activated');
},
drop: function(event) {
var itemId;
this.set('dragClass', 'deactivated');
itemId = event.dataTransfer.getData('text/data');
return this.sendAction("action", itemId);
}
});
カテゴリ制御コンポーネント
App.CategoryControlComponent = Ember.Component.extend({
classNames: ['category'],
classNameBindings: ['active'],
active: false,
click: function(event) {
this.sendAction('action', this.get('kategorie'), this.get('name'));
}
});