Привязка атрибутов с использованием emberjs, handlebar, с перетаскиваемым jquery - PullRequest
Новая
       22

Привязка атрибутов с использованием emberjs, handlebar, с перетаскиваемым jquery

0 голосов
/ 23 марта 2012

Привязка атрибутов 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? }
});

(Я мог бы посмотреть на объект из другого места, но чувствую, что не хочу этого ...) Спасибо!

1 Ответ

0 голосов
/ 29 марта 2012

Самый простой способ (но все еще не идеальный), который я нашел до сих пор, - это связать событие 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);
    }
});

Событие запускается при перетаскивании, когда я его отпускаю, оно вызывает mouseUp.

Плохая частьэто: не обновится, если я вытащу перетаскиваемый из окна, что случается иногда ...

...