I've tasked myself with implementing a twitter clone in Ember.js in order to get more familiar with the framework. I've hit a bit of a snag however when it comes to implementing autolinking in the tweet.
There is an existing plugin that does external links (ex. http://www.google.com) well but doesn't work well for internal links (like #handle or #hashtags) which should as it should be implemented as a LinkComponent but I can't figure out how to insert one from a helper.
source code: autolink helper (relevant unit test)
For now I have just had the helper insert a <a/> tag but this sucks as it unloads the page and fetches everything fresh from the server.
Anyone have any suggestions about how best to implement this part of my Ember app?
Figured it out myself - I converted the helper into a component and added a click listener for bubbled click events from the child links which then get passed to the router:
https://github.com/whoward/ember-twitter-clone/commit/93af68d9f504b8b8972487e6c09851d3523a3678
Related
My question is: Can someone direct me in moving from controller based application to component base application?
I am building a map application for my dog training club. We are specialized in helping finding missing people.
In order to organize our training, we need an application to draw trails and add items on them etc.
I've started an app using Ember-Cli and OpenLayers-3. The application is working nicely, but I would like to move the code from controller based to component base approach.
I would like also to use more routing as at the moment, I have only one route and all user interactions are handled using actions.
I've setup a repository on github for those who would be kind enough to help me:
https://github.com/mylen/mantrailling
if you want to checkout the code and test the app localy, you'll need to modify the referer using a header mod in your navigator to use http://demo.melard.fr
You can see a beta of the website at that page :
http://recherche.utilitaire.melard.fr/beta/map
Thank you in advance,
First, we should clarify the intended uses of components, controllers and routes in ember.js.
Components are similar to Views, but they are isolated and therefore used to create reusable pieces of code, that handle the visual representation of your models.
Controllers are mainly used to decorate your models, but also to hold application state.
Routes represent you current application state. They are responsible for loading your models and to initialize your controllers.
To solve your first problem (controllers -> components), you only need to move all view related stuff, and only this, into components. Your code that decorate your model, for example the active flag of a way-point, remains in the controller. You only need to bind the data of your models/controllers to the components, via embers data binding. (http://guides.emberjs.com/v1.11.0/components/passing-properties-to-a-component)
Your second problem (use routes) is a bit harder to solve, I think. First you need to find all of the states your app currently have. After that, you should move your model loading and saving stuff into this routes.
Edit
Some references describing the problem.
https://github.com/ef4/rfcs/blob/routeable-components/active/0000-routeable-components.md
https://www.youtube.com/watch?v=QgycDZjOnIg
Edit 2
Your question is highly related to How to move ember from 1.x to 2.0, because the changes you mentioned will come along with ember 2.0.
Here are some additional links that describe how to prepare best for this upgrade.
https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice
http://discuss.emberjs.com/t/what-is-a-good-way-to-do-this-in-ember-2-0-no-itemcontroller-no-arraycontroller/6649
You can find a lot of resources if you search for ember 2.0.
Edit 3
Here is I think the most informative source for keeping up with new Ember releases:
https://www.youtube.com/watch?v=wsydQzQF4Ww
I'm working on migrating a non-CLI Ember app to 1.10 with HTMLBars. In a View Template I have a select list rendered by Ember.Select View where it's content is obtained from an array property in the Controller (adultsSelect: (1).upto(4)). I changed 'Ember.Select' to '"select"' as the updated docs suggest. As soon as I setup the 'view select' with 'content=adultsSelect', the browser deadlocks, I'm prompted to stop, debug or continue line 13 in 'platform.js'. If I go into 'debug', I don't know what I'm debugging, but I see a sort of infinite recursion of calls or references to 'platform.js'. If I change the array assignment to just 'adultsSelect: ["1","2"]', there's no improvement. 'Platform.js' is a product of the Polymer project which has something to do with upcoming web components technologies which Ember is using in advance. However, Polymer now says that 'web components polyfills' were released in the past as 'platform.js' so seems I'm already out-of-date with this. It's funny that something as simple as a select list with 4 options can be so complex in Ember that when you go to migrate to a new version, your browser locks up, doesn't tell you why, there's no docs to say this will happen and what to do about it, but that an obsolete version of an upcoming technology being used in advance is somehow involved in it. Should I look for a bower dependency related to web components and update that so I get a compatible version?
For this, I simply removed 'platform.js' as a script linked into 'index.html' and now select lists work, at least in the development build running on node express.
So I've created an require.js and backbone.js (actually marionette.js) application that basically is some sort of mobile app builder.
Now I want to create tests for it, basically testing this scenario:
Navigate to an existing project, e.g site.com/build/1234
Drag a component, check if it is added correctly.
Change properties of a component and see if they are updated correctly. I.e: I've a properties panel which lists the properties
of the selected component, than for example I've a property which
is a selectmenu and changes the size (small, medium, large). I
should be able to test this.
Now I've been searching on google, however since there are so many testing frameworks, i'm not sure which one to pick and which one provides the functionalities I need.
Potentially PhantomJS seems to be something I could use, however please advice me with some specific information.
Thanks.
if you want to actually simulate clicks, look into selenium (http://docs.seleniumhq.org/projects/webdriver/)
If you just want to test that your Backbone components(views, controllers, etc) and templates are working correctly, you can use a js test runner such as Karma (http://karma-runner.github.io/0.12/index.html) to run your tests. Sinon can mock out your ajax calls for you as well. It can use PhantomJs as a rendering engine, so you can actually render your views, and use view.$() style DOM inspection to verify the output of your views.
I'm working on an OpenCart project. I'm creating a "quick view" effect on the special products on the homepage where if people mouse over the item, a popover displays including a bigger image and an add to cart button.
I'm trying to create an Ajax page where I can use in my js to call and get the details of the product.
My ajax file works fine as far as looking at the passed query string and returning some data; I just don't know how I can include the opencart core files, or module files where I can use to get the details.
I hope I'm making sense.
The easiest and best method would be to use the framework itself and simply use the methods provided to get the data you want. You can read the basics about how to use the framework here assuming you are a php developer and have a basic grasp of OOP and MVC
I want to convert component to module apart from using plugin is ther any process to handle it.
(or)
whether we should code somethimg to make my mvc component to module .
(or)
is there any possibility to make my component to be placed at desired module position in my template
Regards,
noble
You can't convert a component to a module. A component, module and plugin are all 3 different things. Obviously if your component was something like a simple upload form, then this could be turned into a module but I doubt very much it is.
Nor can you place the component in a module position.
Judging by what you're asking, I am assuming that this is your own custom component, in which case, you should have had a little think and done a little research before you made it and brainstormed your exact requirements.
1st thing You can't convert a component to a module. You have to understand the difference between them
Components are the largest and most complex extensions of them all; they can be seen as mini-applications. Most components have two parts: a site part and an administrator part. Every time a Joomla page loads, one component is called to render the main page body. For example, Content (com_content) is the component which handles the display of content; users can view at the frontend of your site and, as an administrator, you can edit the content. Components are the major portion of your page because a component is driven by a menu item and every menu item runs a component.
Examples: Content (com_content), Banners (com_banners), Contact (com_contact), News Feeds (com_newsfeeds) and Web Links (com_weblinks)
Modules are more lightweight and flexible extensions used for page rendering. These modules are mostly known as the “boxes” that are arranged around a component, for example: the login module. The footer is a module. Modules are assigned per menu item. So, you can decide to show or hide the logon module depending on which menu item the user is viewing. Sometimes modules are linked to components such as the “latest news” module which links to the com_content and displays links to the newest content items. However, modules do not need to be linked to components, as a matter of fact they don't even need to be linked to anything and can be just static HTML or text.
Examples: Banners (mod_banners), Menus (mod_menu), Who's Online (mod_whosonline)
Read more
If you are using Joomla 1.5 then please refer this plugin it does exactly what you want. http://extensions.joomla.org/extensions/2723/details