I'm stuck in the 'Scrumptious' bookmark app created in a Tuts+ Course called 'Let's Learn Ember'. As the course is some months old, I'm trying to re-do the app using the most updated versions of Ember.js and Ember-Data.
Here's the repo: https://github.com/jantequera/scrumptious
NOTE: due to #claptimes request, I've added a jsbin of the project: http://jsbin.com/ukuDORUZ/2/edit?html,js,console
The thing is, that in the 'bookmarks' template, when I add a new bookmark, it is stored and the "create Bookmark" partial disappears, but the bookmarks table isn't updated, and it doesn't even reflect the changes in the newly created bookmark on real-time, which is the intended behaviour. In other words, I have to refresh the browser in order to see the new bookmark in the table, which is not the way an ember.js app should work.
As I am learning Ember, I might have missed or misunderstood something in the guides that explains this, so any help is welcome. Below I expose the code, if you wish to see it in context or even try it out, use the repo above. Thanks!
EDIT Anton below pointed out and advised the usage of components, which make the jsfiddle above work. However, when I use this solution in my local copy, it wouldn't work UNLESS I use the FixtureAdapter INSTEAD of the LSAdapter (local-storage). Any clue?
http://jsbin.com/ukuDORUZ/6
You use "render" helper:
{{render "table" controller.regular}}
model is not updated in "table" template when you create new bookmark and update controller.regular
you can use component (http://emberjs.com/guides/components/) and bind your model to component's parameter:
{{bookmarks-table elementsBinding="controller.regular"}}
http://jsbin.com/ukuDORUZ/6
Related
I'm trying to understand all the logic behind routers and controllers in Marionette. As you can see below each example is using different approach to handle the triggering actions mechanism,so it's really hard to decide which approach should I be using.
example - link - this one renders the views from the APpController
example - link - uses Marionette.EventAggregator
example - link - uses the App instance to trigger all the actions.
It's also worth mentioning that most of them are 2-3 years old hence I'm asking my self whether or not use them in my app.
I have created a basic Marionette.AppRouter and Marionette.Controller inside my Marionette.Application instance. All the defined routes in my AppRouter module are working correctly. So I wanted to go further and update one of my views once the "#home" route is fired. But I was unable to do so, as after reading all the docs, it was still not clear to me how to update all my views from the AppController?
Should I use EventAggregator for all the communication between AppController and Marionette.Applicaiton ?
Should I define my LayoutView including ItemViews..etc in my AppController ?
Or should I just pass an instance of my App to AppController?
I' would be really glad if someone pointed me to a simple, up-to-date (AMD) example.
The newest way is Backbone.Radio. It will be the default event manager in the next big version of Marionette. You can shim it into the latest version and use it today.
Personally I decided on using Radio together with a custom made router. There are conflicting opinions on how to organize everything but I kept both radio and the router outside of the scope of Marionette.Application (window.radio, window.router, window.app). It works well and can be another viable option.
I am new to Ember, so this might be a stupid question, but bear with me. Is there a specific reason one can't render templates with a dynamic string? Specifically, I push various objects to a controller variable like this:
this.controllerFor('application').get('popups').pushObject({
resource: article,
template: 'article'
});
And then try to render them:
{{#each popup in model}}
{{ render popup.template popup.resource }}
{{/each}}
This doesn't work in Ember as-is, since it expects a string as the template. I just patched this in my ember source in the renderHelper function:
if(name.value) name = name.value();
This makes sure that if the name comes from a property, it gets converted to a string correctly. It works perfectly fine. What is the reason Ember doesn't support this out-of-the-box? Am I missing something?
A little background for the stuff above: I want to open lots of different resources in popups on the page, but I want to keep the popups separated from the rest of the current route so I can show them on their own page if needed without duplicating code. My idea was that I push all open popups to a global array, and they are rendered at the bottom of the page (A bit like we do it at the moment without ember). Maybe there is a better way to do this that I missed!
You want to
Create a popup template independent of route
Pass data to template and render it any where
Right ? If yes there is a very good concept of component in Ember.js
Component is a small module with is separate from application. It only depends upon the data passed into it.
It can be reused in different portion without ever effecting each other. They are especially good to run third party plugins like qtip etc.
here is good article about use case of component.
Again, let me start this by thanking for your time to read this and second by apologizing for not being able to actually paste my code.. it's located on a computer that doesn't have internet access.
I am working to add an icon to a systray in a web application. The icon changes based on values contained in the model. The systray is has a controller located say
myproject/myjs/main/controllers/systraycontroller.js
myproject/myjs/main/models/myniftymodel.js
myproject/myjs/main/mainModule.js
I want to update the model based on user choices on a different page that also has a controller and it's own module
myproject/myjs/colors/colorsModule.js
myproject/myjs/colors/controllers/colorsController.js
My question, what exactly is required in colorsModule.js to get colorsController.js to be able to not only see myniftymodel.js but update it?
myniftymodel.js is just a simple model that returns a values array and is used by the DIV in systray.html to display info about the icon.
I recommend that you wrap the model in a service. Use one of the various providers offered by Angular.
https://docs.angularjs.org/guide/providers
You can then dependency inject the service anywhere you like in your application.
I'm trying to add the equivalent of rails' "flash" functionality in my backbone app, part of which involves putting a showFlash() at the top of each route in my router, and a purgeFlash() at the bottom.
Needless to say, adding those two methods to every route works, but it isn't the most elegant approach. Still, I'm struggling to figure out how to add hooks to backbone routers.
In short, I'd like to run showFlash() before navigating to any new page, and purgeFlash() afterwards. ...Any thoughts?
This plugin should do the trick:
https://github.com/angelo0000/backbone_filters
(not sure though if it works with the latest backbone version)
update - according to this comment it works with 0.9.2
I'm playing with rewriting part of a web application in Rails + Ext. However, I'm having trouble getting an associated models' name to display in the grid view.
I've been able to successfully convert several models and arrange the views nicely using tabs and Ext's layout helpers.
However, I'm in the middle of setting up an association -- I've followed along with Jon Barket's tutorial on how to do this using Ext -- and I've made all the Rails and JS changes suggested (with appropriate name changes for my models,) the result being that the combo box is now being correctly populated with the names of the associated models, and changes are actually written correctly to database, BUT the data doesn't show up in the column, it's just empty. However, the correct data is there in the 'detail' view.
Really just wondering if anyone else ran into this, or had any thoughts on what could be happening. Definitely willing to post code if requested; just note that (AFAIK) my changes follow the tutorial pretty closely.
Thanks in advance!
UPDATE:
Alright, slight progress - kind of. I can get the associated model id # displaying properly -- just by modifying the column model slightly. But I can't get the virtual attribute displayed in the main table (in Jon's example it's country_name.) It still goes blank when I change the data source for that column from
dataIndex: 'model[associated_model_id]'
to
dataIndex: 'virtual_attributes[associated_model_name]'
ANOTHER UPDATE:
Bump. Has NOBODY here tried integrating Ext with Rails?
OK, I should've paid closer attention to the tutorial and how I was using the API and other information available.
If you're using tabs to distinguish between several grid views, don't neglect to export to json any helper methods (you MUST do this in the controller for the model) -- especially ones for retrieving associated models' name!