title: Attribute binding using emberjs, handlebar, with jquery draggable
body: <p>Attribute binding emberjs jquery draggable handlebar</p>
  
  <p>I have an emberJS object:</p>
  
  <pre><code>randomsticker= Sticker.create({
                  id : 2,
                  title : "someeditable value by binding",
                  top : 100,
                  left : 200
              });
  </code></pre>
  
  <p>This has a handlebar view template in the html:         </p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="sticker_view"&gt;
      &lt;article class = 'sticker'&gt;
              {{editablefield sticker.title}}
      &lt;/article&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>So I create this using the generator class:</p>
  
  <pre><code>concrete_view = Ember.View.create({
          templateName : 'sticker_view',
          sticker : randomsticker
  });
  concrete_view.appendTo('somepartofwebpage');
  </code></pre>
  
  <p>I make it draggable using jquery-ui .draggable() method:</p>
  
  <pre><code>$('sticker').draggable();
  </code></pre>
  
  <p>I made want to make the sticker draggable the way it sync's with the randomsticker model-object values.
  My question is what is the simplest/most elegant way to do this?</p>
  
  <p>The problem is that I guess emberjs can not see the changes, what jQuery makes in the attribute field. 
  I tried to bind it to style like I forget about top&amp;left values, Im only storing style (that's not the most elegant way and it also does not bind from view to model.)</p>
  
  <pre><code> randomsticker= Sticker.create({
              id : 2,
              title : "someeditable value by binding",
              style: "top:50px; left:100px;"
          });
  </code></pre>
  
  <p>The template looks like this:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="sticker_view"&gt;
      &lt;article class = 'sticker' {{bindAttr style="sticker.style"}}&gt;
              {{editablefield sticker.title}}
      &lt;/article&gt;
  &lt;/script&gt;   
  </code></pre>
  
  <p>I also found a library what's supposed to bind styles, but it also does not work backwards </p>
  
  <p><a href="https://github.com/yderidde/bindstyle-ember-helper" rel="nofollow">https://github.com/yderidde/bindstyle-ember-helper</a></p>
  
  <p>This did not work also.
  I tried to get it with a computed property like this:</p>
  
  <pre><code>        style : Ember.computed(function() {
              return "top:" + this.get('top') + "px;left:" + this.get('left')
                      + 'px;';
          }).property('top', 'left'),
  </code></pre>
  
  <p>I guess this is what I need on the long run, writing a complex value setter, but I could not figure out, how to get jquery to triger the original object's value-change event.</p>
  
  <p>So I was thinking what to write in the draggable part, to get it work?</p>
  
  <pre><code>$('sticker').draggable({ 
      stop: function(){ //get the values refreshed, but how? }
  });
  </code></pre>
  
  <p>( I could look the object up from other place, but I feel that I do not want that... )
  Thank you!</p>