Question

属性绑定emberjs jquery draggable handlebar

我有一个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在属性字段中所做的更改。我试图将它绑定到样式，就像我忘记了top＆amp; left值，我只存储样式（这不是最优雅的方式，它也不会从视图绑定到模型。）

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

（我可以从其他地方看到这个物体，但我觉得我不想那个......）谢谢！

Answer 1

到目前为止，我找到的最简单的方法（但仍然不完美）是将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);
    }
});

事件在draggable上被激活，当我释放它时它会调用mouseUp。

不好的部分是：它不会刷新，如果我将窗户拉出窗户，有时会发生什么......

使用emberjs，handlebar和jquery draggable进行属性绑定

1 个答案: