I wanted to try out some of the new stuff in JS, so I chose to do Node and Ember.js
I have read that Ember.js is agnostic to the templating engine, so I was wondering whether it supports EJS, since that is supported by node, and is quite similar to ERB, what I am used to.
Thanks
You can use Ember views just like Backbone views if you don't want to use Handlebars. However, we did a significant amount of work to make Handlebars templates update automatically when their underlying properties change. Keep in mind that if you use a template engine other than Handlebars, auto-updating (a big part of the appeal of Ember IMO) will not happen.
That being said, you can set the template property of any view to a function that returns a string, and it will render it to the screen.
var view = Ember.View.create({
template: function() { return "Hi there!" }
});
view.appendTo('#container');
If you'd like more details, please see the blog post I wrote on the SproutCore
blog about why we picked Handlebars: http://blog.sproutcore.com/why-handlebars/
Related
I'm trying to get all available templates in Ember, as of 2.16.x Ember.TEMPLATES doesn't seem to work anymore. Basically I need exactly this, is there an alternative?
I'm trying to dynamically load a route's template based on a model property. I already have the logic working, all I need is a list of the templates.
Related, but doesn't work anymore: List all available Handlebar Templates in the JavaScript console
Thanks!
You can access all of the entries via window.requirejs.entries. If all your templates are fitting some naming or directory rules then you can find the list of them. For example, if all of your templates resides under templates directory, you can find them as following:
var getKeys = (Object.keys || Ember.keys);
getKeys(window.requirejs.entries).forEach(itemName=>{
if(itemName.indexOf('templates')>=0){
console.log(itemName, itemName.indexOf('templates')>=0);
console.log(window.requirejs.entries[itemName]);
}
});
I'm a newbie when it comes to PHP. I wrote some JS to make AJAX requests for my project and it worked well, but I don't have any idea how to convert that into PHP.
I've prepared layouts like the following:
mainLayout.php,
userLayout.php,
offerLayout.php,
In those files are some PHP and MySQL parts that build an HTML page.
In Ajax it was easy to navigate between many users using only one page and replacing some divs with data...
But a huge minus was that you couldn't have a single address reference a user profile or the offer (like mywebsite.com/user1).
Now, when I use PHP I want to achieve same layout effect.
How can I avoid creating a thousands of pages (of course even dynamically it seems to be a waste of memory IMO) like user1.php, user2.php, offer1.php, etc.
I don't know how to achieve the effect of being on a site like example.com/user277373.php without creating thousands of files but only one template.
Two solutions I see is either you use GET to parse your data:
http://example.com/?data=1736861
and than access it over the $_GET variable:
$id = $_GET["data"];
($id will be 1736861)
or you use the flight php extension, that will look something like this:
Flight::route('/id/#id', function($id){
echo "ID: $id";
});
and the URL would look like http://example.com/id/1736861. You can also use multiple variables with the flight module.
I hope this helped, Sebastian
Are you familiar with any MVC frameworks? If not, I would highly recommend getting accustomed to the MVC design paradigm. MVC = Model View Controller. From Wikipedia, a short excerpt:
A model stores data that is retrieved according to commands from the controller and displayed in the view.
A view generates new output to the user based on changes in the model.
A controller can send commands to the model to update the model's state (e.g., editing a document). It can also send commands to its
associated view to change the view's presentation of the model (e.g.,
scrolling through a document).
Two of the key components of MANY frameworks (in pretty much any language), are Routes and Templates. When utilizing a routing system, you're able to specify a template for every page loaded that matches a specific route. For instance, site.com/people/:id where ':id' can be any value in the URL, and be configured to use "person.html" for the HTML output. Note that "person.html" receives variables/data that will dynamically populate content, e.g. <h2>Hello, {{name}}</h2>
So, to clarify, site.com/people/252, site.com/people/12, site.com/people/5, site.com/people/john would all match the site.com/people/:id route path where :id is dynamic, and your system will use ONE TEMPLATE (which you specify) to display all the data. Don't forget, when that route path is met, that's only step 1. You will probably need to take that :id run some database query and pass that data into the template.
A popular micro PHP framework called Slim, might be a good starting point. Here's documentation for its way of handling Routes and Templates:
https://www.slimframework.com/docs/objects/router.html
https://www.slimframework.com/docs/features/templates.html
Slim is commonly used with Twig, a super popular PHP template engine. Here's its website/documentation: http://twig.sensiolabs.org/
And if that wasn't enough, Slim has a super handy First App Walkthrough that will show you routes, database connection, and templates: https://www.slimframework.com/docs/tutorial/first-app.html
Hope this information helps you on your journey – Best of luck!
We use DNN and often need to pass a few context specific values (like page id or module-on-page-id) into an AngularJS app. We've developed our own conventions how to do this, but would like to hear from others how they approach this to find a best practice.
So basically the situation is that the server-page has information needed by the JS. Using WebAPI is not an option, as these values are known in the page, but not in a separate request. Things I've seen so far have been:
Use in-view-razor like href="#Tab.TabId/{{...}}" (I don't like this)
Place the values in the ng-init like ng-init="config = { prop1: '#Tab.TabId' }"
Create a separate <script> tag where we generate a module on the fly containing these values so angular.module("config", []).constant('prop1', '#Tab.TabId')
Create a json with razor in the page somewhere and inject all of it as a module into the app using a generic code which does the same as #3, just with cleaner code re-use.
I've seen all these and have also used all. Currently we avoid #1 as we believe it's not good to mix templating languages and because it doesn't allow externalizing parts of the view. So basically we use #2 as for quick-and-simple (and a bit dirty) + #3/#4 for larger projects.
Do you have a better way, or which way would you prefer?
We are using variant #4.
This has the advantage that the JSON defines the exact interface for the config needed by the JS module. And Razor is great to generate URLs using #Url.Action.
we use NewtonSoft and do JSONConvert.SerializeObject(ObjectName) and then pass it over as a Session from the controller and then use #Html.Raw(ObjectName) and its a JSON Object that can be utilized easily in javascript...
I'm looking at AngularJS, trying to learn the basics. Quite experienced with JavaScript and server programming, HTTP etc, so I do have an understanding of what it does. I'm watching Curran Keller's "50 examples" tutorial on YouTube (link below), and I've found lots of documentation on what Angular does... but not so much on how it does it. Knowing the rough on how Angular is able to do all these neat things -- it being "only" a JavaScript wrapper, executing in the web browser -- would be helpful when I am to write my first Angular "app" (webpage with metadata-enhanced JS, as I currently think of it). ;-) that ought to get the discussion going!
So, here's what I think I've gleaned so far:
Angular JS is JavaScript. It runs in the browser, via a .js file, so eventually the directives and tags and "angular code" (controller) is translated into JavaScript, which is what's actually run in the browser.
As such, Angular is really "just" a library of wrappers for normal JavaScript objects. I guess this is the main point; it's a simplification of the otherwise rather complex "native" JavaScript code. For example, rather than instantiating an XMLHttpRequest object, and using it to GET or POST some data to/from a server, Angular provides an $http service. All you need to type is $http.get();
Furthermore, Angular has this powerful dynamic propagation of changes in the UI, as the user uses the page. Almost like in Excel, if a piece of data is changed somewhere, then all other usages/references of same data (i.e. a variable, an HTML form element, or just a variable output to HTML with {{myVariable}}) are updated accordingly. Automatically, and immediately.
Another cool property is enhancing HTML tags with Angular directives. This is a very simple way of dynamically producing HTML output (or just plain text) from what ever is in the Angular (i.e. JavaScript) memory. Again, this can be done with plain vanilla JS, traversing the DOM and inserting child elements, but Angular alleviates the need for any of that complex coding. All you need to program is <li ng-repeat="name in names">{{name}}</li>
So, how does Angular achieve all this, using "only" JavaScript? Obviously, as with GetElementById, JavaScript can access (read) and parse the HTML DOM, so I take it Angular begins by reading in the entire document and looking for any HTML tags with the ng-app directive. These are parsed further, and Angular code is converted to either generate additional HTML output (e.g. ng-repeat), or translated into embedded JavaScript (as in $scope.name='';).
One thing I've had trouble finding an answer to in the documentation, is what the dollar signs do. I think I know the answer, but I'm not confident. Since Angular has its own JavaScript-like programming language, Angular needs to be able to discern between the JavaScript-parts (e.g. variables used in HTML FORM elements) and the Angular objects. I mean, what's Angular function calls and what's the input/arguments to those. Prepending $ to the Angular words lets the Angular JS-translator know what not to translate, so to speak?
Maybe someone can follow up on this, correct me where I'm wrong?
The examples in Curran Keller's "Introduction to Angular.js in 50 Examples" (http://youtu.be/TRrL5j3MIvo) is a great reference. For instance, maybe the dollowing simple example could be a starting point? In this example, I'm wondering (in addition to the above thoughts) what specifically is the purpose of the $scope object. Can we rename it to $whatever, or is "scope" a reserved word?
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example 14</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function ($scope) {
$scope.names = ['Larry', 'Curly', 'Moe'];
});
</script>
</head>
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</body>
</html>
One thing I've had trouble finding an answer to in the documentation, is what the dollar signs do.
The dollar signs are simply a naming convention reserved for Angular and JQuery. It's simply for readability to quickly discern what is Angular/JQuery functions. See http://google.github.io/styleguide/angularjs-google-style.html#dollarsign.
In this example, I'm wondering (in addition to the above thoughts) what specifically is the purpose of the $scope object. Can we rename it to $whatever, or is "scope" a reserved word?
$scope is special, it refers to the application model. See docs.angularjs.org/guide/scope and docs.angularjs.org/guide/controller (can't post direct links because I don't have the reputation yet :( ).
In the above example, $scope is used to communicate between the controller and the DOM. The DOM can only refer to items on the scope in angular bindings. Breaking down the example above:
<body ng-controller="NameCtrl">
This instantiates the controller named NameCtrl, and sets up the same $scope between the DOM and that instance of NameCtrl. This element and all children elements can now reference the same $scope as NameCtrl.
$scope.names = ['Larry', 'Curly', 'Moe'];
This is where the controller is setting the model to Larry/Curly/Moe for the DOM to consume.
<li ng-repeat="name in names">{{name}}</li>
"names" refers to the same $scope.names in NameCtrl (remember, you don't write $scope from the DOM). Whenever the controller NameCtrl updates $scope.names, the DOM will update as well, creating a list item for each element in the array 'names', and each element has it's own $scope as well.
I suggest going through some of the AngularJS tutorial app helps quite a bit: docs.angularjs.org/tutorial/
I'm designing the intranet web application for our company. One of the app. requirements is to provide "widget" platform. Which means that developers may create mini application, that will work inside the main web application and can use it's resources. Widgets could be independent of applications and they can have there own data models and behaviors. My task is to provide widget abstraction and widgets engine within application (widgets management and organizing on the application pages). I reviewed several JS "MV*" frameworks and it looks like Ember.js is the thing that I want to use. But I can't understand how to separate in Ember, the abstract functionality between widgets and the application. From one side, the main application is Ember application by itself that manages current widgets appearance, from other, widgets, are applications to. Is it possible to have nested apps in Ember, so can make something like:
Widgets.SpecificWidget1 = Em.Application.extend({
name:"I'm custom widget",
ready:function(){alert('Widget app Ready')}
});
App = Em.Application.create({
rootElement:"#widgetsPanel",
ready:function(){alert('main app Ready')}
});
App.WidgetsController = Em.ArrayController.create({
widgets:[Widgets.SpecificWidget1.create(),
Widgets.SpecificWidget1.create(),
Widgets.SpecificWidget1.create()]
});
App.WidgetsView = Em.View.extend({
});
<div id="widgetsPanel"></div>
<script type="text/x-handelbars">
<ul>
{{#each App.WidgetsController}}
{{#view App.WidgetsView contentBinding="this"}}
<li>{{content.name}}</li>
{{/view}}
{{/each}}
</ul>
</script>
If this way is not correct to do this, can you please tell what is the better way to do it?Thx
It's hard to tell what's happening in the code, but this is my best guess of what you're trying to do. This isn't designed to work as is, but it should put you on the path to what you want to do:
Widgets.SpecificWidget1 = Em.Object.extend({
name:"I'm custom widget",
ready:function(){alert('Widget app Ready')}
});
Assuming this is supposed to be the base model you're working from, the Widget is extending Ember.Object, as that's a tangible thing. As far as I can tell, there's not much to be gained from extending Ember.Application in most use cases, and in a basic scenario where your Ember Application is an entire page, you'll never want more than one.
App = Em.Application.create({
rootElement:"#widgetsPanel",
ready:function(){alert('main app Ready')}
});
App.WidgetsController = Em.ArrayController.create({
widgets : [Widgets.SpecificWidget1.create(),
Widgets.SpecificWidget1.create(),
Widgets.SpecificWidget1.create()]
});
As far as I can tell this is okay.
App.WidgetsView = Em.View.extend({
});
You don't really gain anything from this by itself. If you give it a 'templateName' attribute, you can bind it to a particular template defined in Handlebars to get some functionality, and wrap the general Widget to get a better MVC setup going. But for what you have, you could remove this.
For what I'm working on at the moment, I have a design setup that looks like this Fiddle: http://jsfiddle.net/PastryExplosion/99CMD/