michaelpapworth / tinymce-knockout-binding

A KnockoutJS custom binding that applies a TinyMCE Editor to the bound HTML element
MIT License
39 stars 19 forks source link

Updating bound value doesn't seem to work #7

Closed paulirwin closed 10 years ago

paulirwin commented 10 years ago

When updating the value, say after an AJAX call returns with the data, the editor does not seem to reflect the changes for me. Perhaps I'm using the API wrong, so please give me guidance.

Here's a JSFiddle that shows the issue: http://jsfiddle.net/EfQN4/2/

After 3 seconds (simulating a delay on an AJAX call), I call App.text("...") with some HTML that should be displayed in the TinyMCE editor, but it doesn't seem to do anything. I've included another textarea that just uses the default value binding without TinyMCE to demonstrate that the value is being updated correctly.

Let me know if I can explain further or if you have any questions. Thanks!

paulirwin commented 10 years ago

I found that this works for me. I don't want to submit a PR yet because I'm not sure if it breaks anyone else's code. Let me know if this seems to work well across the board.

Here's the updated fiddle with the fix: http://jsfiddle.net/EfQN4/3/

Replace the 'update' method with this:

'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // Implement the 'value' binding
        var currentValue = $(element).val();
        var newValue = valueAccessor()();

        if ((!currentValue && newValue) || (!newValue && currentValue)) {
            $(element).html(newValue);
        }

        return ko.bindingHandlers['value'].update(element, valueAccessor, allBindings, viewModel, bindingContext);
    }
michaelpapworth commented 10 years ago

Great work, thanks for highlighting this. I have also observed from your working solution that making a change within the unbound <textarea> is not reflected by the TinyMCE binding. As part of including a fix for this I'd like to address the root cause.

Trapulo commented 10 years ago

same problem Using you update is a little better: after I change the value in object model, the tinyMCE is updated. But if I change it a second time, it doesn't change anymore :(

paulirwin commented 10 years ago

Yeah, it fixed it for what I needed it for, but I recognize that it's not a perfect solution. I'd be interested in seeing others' thoughts on this.

Trapulo commented 10 years ago

this works http://jsfiddle.net/DwLqj/72/

michaelpapworth commented 10 years ago

v1.1.0 now addresses this issue