Ember.js View on Global Context Deprecation

[cpradio]

Can someone with more knowledge of Ember.js than I assist me in figuring out how to access a view without using Global Context?

I’m getting the following JavaScript warning:

DEPRECATION: Resolved the view "Discourse.ComposerHelpContentView" on the global context. Pass a view name to be looked up on the container instead, such as {{view "select"}}. http://emberjs.com/guides/deprecations#toc_global-lookup-of-views-since-1-8
        at lookupViewByClassName (http://localhost:3000/assets/development/ember.js?body=1:6841:15)
        at handlebarsGetView (http://localhost:3000/assets/development/ember.js?body=1:6889:23)
        at EmberObject.create.helper (http://localhost:3000/assets/development/ember.js?body=1:9629:19)
        at viewHelper (http://localhost:3000/assets/development/ember.js?body=1:9879:25)
        at program3 (eval at <anonymous> (http://localhost:3000/assets/handlebars.js?body=1:1946:25), <anonymous>:22:173)
        at prog (http://localhost:3000/assets/handlebars.js?body=1:469:14)
        at CoreView.extend.render (http://localhost:3000/assets/development/ember.js?body=1:42305:20)
        at apply (http://localhost:3000/assets/development/ember.js?body=1:19679:27)
        at superFunction [as _super] (http://localhost:3000/assets/development/ember.js?body=1:16109:15)

You can find the code at https://github.com/cpradio/composer-help-button

The two parts that you need to focus on are:
https://github.com/cpradio/composer-help-button/blob/master/assets/javascripts/composerHelp.js

And
https://github.com/cpradio/composer-help-button/blob/master/assets/javascripts/discourse/templates/composerHelp.js.handlebars

So can someone help me resolve this warning?

[cpradio]

So I’ve discovered changing

            {{#view Discourse.ComposerHelpContentView model=this}}
                {{{view.parsedContent}}}
            {{/view}}

to

            {{view 'composerHelp' model=this}}

Gets me around my initial problem, but then it doesn’t display any of the content, which is a greater problem.

[orodio]

Right so, usually in ember data flows through the application in a set sort of way.

The following screenshots are slides from Code Schools Ember Course

Usually what happens is a route comes in, calls a controller, the controller gets stuff form the model (if there is one) and then calls off to the view, which injects stuff into the template. Sorry its been a while. Basically in the context of this topic, you want to tell the view what to be from above, so if you want to access a view from some context you need to go into the thing above where you need the view and tell it there that the view needs to be in the thing below. Hence the such as {{view "select"}} sorry its been a while since I have done much ember, and don’t actually know if this is correct anymore.

[cpradio]

So maybe I need a controller for my ContentView? As the modal works, the content doesn’t. Does that make sense?

[orodio]

Could maybe do it as a component too…

[cpradio]

Okay, so I got the component to be registered and invoked, but for whatever reason, it won’t read the property and spit out the information…

Component:

export default Em.Component.extend({
    tagName: "div",

    render: function(buffer) {
        console.log(this.get("model"));
        buffer.push(this.get("model.parsedContent"));
    }
});

Template:

<div class="modal-body composerHelp-modal" style="overflow: visible">
    {{#if loadingTags}}
        {{i18n loading}}
    {{else }}
        <div class="composerHelp-content">
            {{composerHelpContentComponent model=this}}
        </div>
    {{/if}}
</div>

Output of console.log(this.get(“model”))

Class {toString: function, flashMessage: (...), composerView: Class, __ember1418130257650: "ember1946", __nextSuper: undefined…}
__ember1418130257650: "ember1946"
__ember_meta__: Object
__nextSuper: undefined
composerView: Class
flashMessage: (...)
get flashMessage: function GETTER_FUNCTION() {
set flashMessage: function SETTER_FUNCTION(value) {
parsedContent: "<p>This is just random text to see if it continues to work</p><p>How much can it support?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>Another Line?</p><p>How many more do we need?</p>"
toString: function () { return ret; }
__proto__: Class

But using this.get(“model.parsedContent”) doesn’t return anything…

[cpradio]

I solved it. I needed to add a re-render line to my component.

_shouldRerender: Discourse.View.renderIfChanged('model.parsedContent'),

Wohoo! Got it working and now I don’t get a Deprecation warning anymore.

[cpradio]

And as an FYI for anyone else. That line ended up causing the following WARNING:

WARNING: `rerenderIfChanged` is deprecated. Use the `StringBuffer` mixin with `rerenderTriggers` instead.

Which I fixed by replacing the _shouldRerender line with:

    parsedContentChanged: function() {
        this.rerender();
    }.observes('model.parsedContent')

And now it functions without any warnings.