Refactoring Computed Properties on Ember.js 1.13 - ember.js

I was able to upgrade most of my Ember.js project to 1.13 after having some issues along the way, but now I can't wrap my head around the following deprecated code:
filteredPosts: function(){...}.property('var1','var2','var3')
When I enable it, the only notice that I receive is:
Uncaught TypeError: controllerClass.proto is not a function.
Noting that ComputedPropertyPrototype.get is the only useful information coming from the Stack Trace.
After researching around, I only found this concerning the deprecation, so I wanted to know how such code would be refactored into the native array methods or into anything that allows the same behavior.
Also, my apologies as I unfortunately cannot post an extra link to the specific file due to being a new user, so if you want to see the complete project you can head to github.com/Deovandski/Fakktion.

filteredPosts: function(){...}.property('var1','var2','var3')
should become:
filteredPosts: Ember.computed('var1', 'var2', 'var3', function() {
...
});
It's because prototype extensions are discouraged in recent versions of Ember and seems like you've encountered a problem related to prototype extensions. It'd be best if you create a demo of this issue, but Ember.computed should just work.

Related

How do you use precompiled handlebars templates with emberjs 1.0.0-rc.2?

I'm trying to use guard-handlebars to precompile my handlebars templates (to avoid having them all in my index.html, which feels slightly sub-optimal...). The precompilation works well, and Ember accepts the fact that the template accept when I inject it into Ember.TEMPLATES like this:
Ember.TEMPLATES['application'] = Handlebars.templates['application']
However, it doesn't work. I get an exception like this:
Could not find property 'outlet'
...in the Handlebars helperMissing method. It seems like Ember uses some monkey-patching of the default Handlebars stuff, supposedly adding support for the {{outlet}} helper and others. But my template does not seem to use these outlets. How do you work around this?
I'm using the handlebars compiler installed via NPM to compile the templates.
Found a duplicate question with a suggested solution/workaround: How can I consume handlebars command-line generated templates with Ember?
(short summary: yes, precompiling with the handlebars command line program does not work straight away, exactly because of the reason I am suggesting in the original question)
The plugin for you.
(Here's a sample integration: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/blob/master/Gruntfile.js)
The guard-handlebars gem is pretty out of date, it was not designed to work with ember.
Today there are a few options.
barber with rake-pipeline
grunt-ember-templates
For example, to compile an ember template with barber try something like this:
compiled_template = Barber::Ember::FilePrecompiler.call(IO.read(file))
# now ruby variable compiled_template is a string like: "Ember.Handlebars.template(function(...));"
result = "Ember.TEMPLATES['#{name}'] = '#{compiled_template}';"
# now result is a JS string that sets Ember.TEMPLATES[name] to precompiled handlebars
When a new version of ember comes out it can take a few days to make it's way thru the ecosystem. When that happens you might find the ember-source gem helpful. See Alex's blog post for more detail:
http://alexmatchneer.com/blog/2013/02/27/gemifying-ember-dot-js-slash-handlebars-dot-js-slash-etc-dot-js/

Ember.Controller doesn't exist?

I'm just getting started with Ember. I'm a little confused on some things, as the guides on the main site seem to indicate different ways of working.
In the main docs (http://emberjs.com/documentation/), it indicates that a controller should just extend an ordinary Ember object like this:
Ember.Object.extend();
Which works fine for me.
Then in the guide to using Routing (http://emberjs.com/guides/outlets/) it suggests that there is a Controller object type that you can extend:
Ember.Controller.extend();
This doesn't work for me, and if I simply try to console.log Ember.Controller, its undefined.
I'm using Ember version 0.9.8.1.
Should I worry about this, or should I just carry on with extending Objects as my controllers?
0.9.8.1 is aging, and unfortunately even the guides on the site are ahead of it -- use latest (at https://github.com/emberjs/ember.js/downloads) to keep up with the most current best practices.
Update: 1.0-pre is out (emberjs.com), so that is the best to use. The docs / guides have been brought up to date.
I think #pauldechov means the specific "latest" build which you can find here: https://github.com/emberjs/ember.js/downloads
But also keep in mind that the documentation and "latest" are not always in sync.

Why is my Ember.Router giving this TypeError?

I'm using Ember built from git master. My RouteManager is not complex, but when I try to start my app, I get this error:
Uncaught TypeError: Property '1' of object , is not a function
Following the trace indicates that this is happening on the app's initialization.
This jsfiddle shows the problem, although you'll have to look in the javascript console to see the error message. My actual router will be more complex than this, but I've pared it down to the bones to try to eliminate potential error sources.
You need to update your version of Ember Data to the latest version from master, as the injection API changed.
Here is a fiddle which "works".
http://fiddle.jshell.net/Sly7/ZySzK/
I pick up an ember-data resource from another fiddle I found on stackoverflow.
The way of populating the arraycontroller is weird. Usually you pass the context in the connectOutlet method of the controller, by specifying a context (in your case, it should be Sylvius.Section.find() )
I don't know why, but doing this, I have the error 'Sylvius.Section has no method find'... perhaps an other mess due to ember-data/emberjs bad version.

Ember data - How to update record

I did implement some code with ember-data talking to a sinatra json-app. Method findAll works as expected and load of records.
Also I did implement the updateRecord-method in the DS.Store.create, but don't really know how to update and commit. Please, see the code here (for sake of brevity, I didn't include the jquery functions): http://pastie.org/3197008
I tried the following:
a = Todos.records.objectAt(0).set("text", "should be so")
a.store.commit()
But I get the following error: TypeError: Object (subclass of DS.State) has no method 'enter'
How should I update records? Or did I forget to implement something for the update?
Thanks in advance!
I had the same problem. I think this is a bug in ember-data. The problem is that the code was not properly initializing certain substates, and those substates were not state instances but rather state classes.
I fixed the problem by defining a function that generates a new state instance (with properly created substates) each time it is called. You can find my changes here.
I also requested that the ember-data folks pull my fix, so hopefully this issue will disappear soon. You can view the pull request for discussion.
i had the same problem this morning. Use the emberjs git version

Ember.js: OK to avoid this.get('attr')?

My Ember.js model, view, and controller classes are getting a bit verbose. Part of this comes from writing this.get('attr') instead of this.attr.
Is it OK to always just write this.attr, as long as the attribute is declared directly, not via a binding?
(I understand that setting is a different issue -- you always have to call this.set('attr', value) in order to update dependent attributes and templates.)
IIRC, you can do this for private properties that you know will not be observable.
The convention is to prefix your private properties with an underscore (eg _myProperty) which tells Ember not to bind it.
See the docs for .get(), or check the source code if you're so inclined.
If the property is being observed or bound, you DON'T want to do 'this.attr'. The get command is the nexus through which observers and bindings are triggered.
The previous answers to that question are outdated by recent version of Ember. Since 3.1, which was released in April 2018, native ES5 getters could be used for computed properties also. In Ember 3.1 this.get('attr') is the object uses unknownProperty, is an Ember Data PromiseProxyObject or if using with a path and some elements of it may not be an object. Please refer to release notes for details. You will get a helpful assertion in that cases.