emberjs绑定和jwysiwyg

Question

I would like to use jwysiwyg jQuery plugin https://github.com/akzhan/jwysiwyg with a Ember.TextArea http://emberjs.com/ , but I can not seem to get the bindings to work :(

Consider the example below, I have used the runloop thingy to call the .jwysiwyg jQuery plugin after the bindings have fired (so it contains the correct data).

I am unsure how to describe my problem, but in simplistic terms, I can not get the data to flow the other way ... ie. when I update the data in the text area (now an html editor) the model does not get updated.

<script>
    App = Ember.Application.create();

    App.entry = Ember.Object.create({
      sometext: "some demo text in here"
    });

    App.HTMLField = Ember.TextArea.extend({ 
        valueBinding: "App.entry.sometext",
        didInsertElement: function() {
            this._super();
            Ember.run.schedule('actions', this, function(){
                this.$().wysiwyg();
            });
        }
    });
</script>

<!-- place view in page -->
<script type="text/x-handlebars">
    <p>
      {{App.entry.sometext}}
    </p>
    <p>
      {{view App.HTMLField}}
    </p>
</script>

Does anyone know of a way around the problem? .. suggestions of a workaround? .. any pointers? ... anything that might help?

Answer 1

Something like should do it:

App.HTMLField = Ember.TextArea.extend({
    didInsertElement: function() {

        this._super();

        var self = this;
        Ember.run.schedule('actions', this, function(){
            this.$().wysiwyg({
                events: {
                    save: function( ) {
                        var c = this.getContent();
                        self.set('value', this.getContent() );
                    },
                },
            });
        });
    }
});