屬性使用emberjs，車把結合，與jquery拖動

屬性結合emberjs jquery的拖動車把屬性使用emberjs，車把結合，與jquery拖動

我有一個emberJS對象：

randomsticker= Sticker.create({ 
       id : 2, 
       title : "someeditable value by binding", 
       top : 100, 
       left : 200 
      });

這具有在html車把視圖模板：

<script type="text/x-handlebars" data-template-name="sticker_view"> 
    <article class = 'sticker'> 
      {{editablefield sticker.title}} 
    </article> 
</script>

所以我使用發電機組創建了這個類：

concrete_view = Ember.View.create({ 
     templateName : 'sticker_view', 
     sticker : randomsticker 
}); 
concrete_view.appendTo('somepartofwebpage');

我使它可拖動使用jQuery UI的.draggable（）方法：

$('sticker').draggable();

我做想要做的貼紙可拖動它同步與randomsticker模型對象值的方式。我的問題是做到這一點最簡單/最優雅的方式是什麼？

問題是，我猜emberjs無法看到更改，jQuery在屬性字段中所做的更改。我試圖將其綁定到風格就像我忘了頂部&左值，我只是在存儲方式（這不是最優雅的方式，它也不會從視圖綁定到模型。）

randomsticker= Sticker.create({ 
      id : 2, 
      title : "someeditable value by binding", 
      style: "top:50px; left:100px;" 
     });

模板外觀像這樣：

<script type="text/x-handlebars" data-template-name="sticker_view"> 
    <article class = 'sticker' {{bindAttr style="sticker.style"}}> 
      {{editablefield sticker.title}} 
    </article> 
</script>

我還發現了什麼是應該綁定樣式庫，但它也沒有向後工作

https://github.com/yderidde/bindstyle-ember-helper

這也沒有效果。我試着用計算出的屬性是這樣得到它：

 style : Ember.computed(function() { 
      return "top:" + this.get('top') + "px;left:" + this.get('left') 
        + 'px;'; 
     }).property('top', 'left'),

我想這是我需要從長遠來看，在編寫複雜的值設置器，但我無法弄清楚，如何讓jQuery來激怒原始對象的價值變化事件。

所以我想着要在可拖動的部分寫什麼來讓它工作？

$('sticker').draggable({ 
    stop: function(){ //get the values refreshed, but how? } 
});

（我可以從其他地方尋找對象，但我覺得我不希望這樣......）謝謝！

來源

2012-03-23 TheGooseMan

迄今爲止我發現的最簡單的方法（但還不完美）是將mouseUp事件綁定到視圖類。

所以我創建模板稍有不同：

<script type="text/x-handlebars" data-template-name="sticker_view"> 
    <article class = 'sticker'> 
     {{#view App.StickerView}} 
      {{editablefield sticker.title}} 
     {{/view}} 
    </article> 
</script>

此步驟完成後，我不得不創建一個類：

App.StickerView = Ember.View.extend({ 

    mouseUp: function(event){ 
     var emberStickerObj = this.get('content'); // get the emberobj  
     var pos = $(event.target).position(); // ideapos 
     emberStickerObj.set('top',pos.top); 
     emberStickerObj.set('left',pos.left); 
    } 
});

該事件在拖動trigered，當我釋放它會調用mouseUp。

不好的部分是：它不會刷新，如果我從窗口拖出可拖動，有時會發生什麼......

來源

2012-03-28 22:34:13 TheGooseMan

屬性使用emberjs，車把結合，與jquery拖動

回答

相關問題