How to update `value` when `model` data is updated.

[dirkdirk]

I have a route that displays a simditor editor. It loads fine the first time the route is called, but when the model's data changes, the editor's value does not change.

app/router.js

  this.route('items', function() {
    this.route('item', {path: ':item_id'});
  });

app/routes/items/item.js

  model(params) {
      return this.store.findRecord('item', params.item_id);
  }

app/templates/items/item.hbs

{{simditor-editor value=(mut model.text)
                  update=(action (mut model.text))
                  toolbar=simditorOptions.toolbar
                  editor=(mut editor)
                  onValuechanged=(action 'saveItemSlow')
                  onBlur=(action 'saveItemNow')  }}

Rendering localhost:4200/items/3 displays the text for item_id 3 in the Simditor editor as expected. But then going directly to localhost:4200/items/7 still displays the text for item_id 3.

If instead, one goes to localhost:4200/items and then to localhost:4200/items/7, the text for item_id 7 is displayed in Simditor as expected.

I suspect it has to do with Simditor not being destroyed when staying on the items/item_id route. Changing routes and going back to the items/items_id route, destroys the component and rerenders it.

Is there a way to manually destroy all instances of Simditor on some hook like beforeModel? And then manually force the component to rerender?

Or is there another / better solution?

[dirkdirk]

SOLVED IT! or not ... see my comment below. Turns out this fix throws Ember errors.

Add the following valueDidChange method to simditor-editor.js in node-modules dir:

    ...
    locale: 'en-US',
    valueDidChange: Ember.observer('value', function() {
      console.log('--------------- valueDidChange() ------------------');
      let thisEditor = this.get('editor');
      let editorValue = thisEditor.getValue();
      if(this.value !== editorValue) {
        console.log('NOT THE SAME!');
        thisEditor.setValue(this.value);
      }
    }),
    didInsertElement(){
    ...

I'll put in a Pull Request later.

[flyfloor]

@dirkdirk ok

[zhyq0826]

@dirkdirk I have try your problem myself，it looks like your pull request pull 7 can solve this problem, but it's recommended that component should use didUpdateAttrs or didReceiveAttrs instead of observer , see the-component-lifecycle. I have commit this in this. I don't know why these two hooks only be triggered when attribute passed to component is object，so I wrap html content in model。You can try in your local computer with the latest commit.

[dirkdirk]

@zhyq0826 Good work my friend!

My fix threw warnings about double rendering that Ember didn't like. Your fix works perfectly so far.

If you don't hear from me again, it means it's working fine.

Thanks!

[dirkdirk]

@zhyq0826 Bug fix ...

On line 24 of your code this.attrs.value.value.content returns [object][Object], which is then set as the value of _editor.

To fix this, use get on line 24 of addon/components/simditor-editor.js to return the actual value of content:

this.get('_editor').setValue(get(this.attrs.value.value, 'content'));

Pull requested.