So I'm checking out Emberjs.
Scroll down a little on the homepage to "GETTING STARTED WITH EMBER.JS IS EASY."
Great, that looks simple, I'll give it a go.
Create a new boilerplate HTML5 file.
Paste their template code into my :
<body></body>
Include emberjs:
<script src="ember.js" type="text/javascript"></script>
Include the JS code they provided into a:
<script type="text/javascript"></script>
Within my head tags. Great, let's see what happens.
Load the page, Console tells me it requires jquery. So no problem I include jQuery. Try again, another error, I need to include handlebars. No problem, I include handlebars. Try again, App is not defined... right... so I include
window.App = Ember.Application.create();
Above the snippet they provided. Try again, DS is not defined. At this point I have no idea where to go next. I took a look at the emberjs guides section as I assume I have to define a DS model somewhere, or something. But the guides were no use.
Am I missing something blatantly obvious, or is this in fact not 'easy' as they put it? What do I have to do to make this basic example work (and why the hell have they given 'basic' code that doesn't work out the box as an example)?
Edit:
My full code thus far:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="ember.js" type="text/javascript"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
fullName: function() {
return this.get('firstName') +
" " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.peopleController = Em.ArrayController.create({
content: App.Person.findAll()
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
{{#each peopleController}}
<li>Hello, <b>{{fullName}}</b>!</li>
{{/each}}
</ul>
</body>
</html>
The problem isn't you, it's that the documentation neglects to list the required dependencies, the naming convention of Handlebars, and suddenly starts talking about a Post controller without providing the code. There's also a couple of places where there's a little bit of cognitive forward referencing going on, so if you know about EmberJs, the guide makes sense, but if you're trying to learning it fresh, you have to hop around, make assumptions, and conduct some tests.
While this isn't the minimal code needed for an EmberJS application, it should be enough to get you started to plug in about 80% of the Getting Started Guide. Hope this helps.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="jquery-1.9.1.js"></script>
<script src="handlebars.js"></script>
<script src="ember-1.0.0-rc.1.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
// Make a global variable -- http://emberjs.com/guides/application/
App = Ember.Application.create({
VERSION: '1.0.0',
// store: Ember.Store.create().from(Ember.fixtures)
});
// http://emberjs.com/api/classes/Ember.Application.html
App.ready = function() {
// alert("App initialized!");
};
// Application Controller, extended with custom properties
App.ApplicationController = Ember.Controller.extend({
appName: 'My First Example',
firstName: "Charlie",
lastName: "Brown",
// initial value
isExpanded: false,
expand: function() {
this.set('isExpanded', true);
},
contract: function() {
this.set('isExpanded', false);
}
});
// A router
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
// `controller` is the instance of ApplicationController
controller.set('title', "Hello world!");
}
});
</script>
<script type="text/x-handlebars" data-template-name="application">
<header>
<h1>A Header - {{appName}}</h1>
</header>
<div>
Hello, {{firstName}} {{lastName}}.
<p/>
{{#if isExpanded}}
<div class='body'>{{body}}</div>
<button {{action "contract"}}>Contract</button>
{{else}}
<button {{action "expand"}}>Show More...</button>
{{/if}}
<hr/>
{{outlet}}
<hr/>
</div>
<footer>
<H1>A Footer</H1>
</footer>
</script>
</body>
</html>
You do not need to define a DS store unless you have included Ember Data. I have the most basic Ember starting template available on jsfiddle. You can view the source of the rendered frame to get an idea that you only need 3 JS files (which you already have included) in order for the application to work.
From there it is up to you, but yes I admit that the documentation is lacking in regards to starting off from scratch.
From your edit, you have a DS object referenced, but you have not referenced the Ember Data script. It's currently an add-on to the default EmberJS script due to the fact that it is not API locked, whereas the main stream is locked.
Related
I am so confusing about Vue's structure. First time, I learnt from a video by freeCodeCamp channel on YouTube.
After that, I found a book to learn
Getting to Know Vue.js Learn to Build Single Page Applications in Vue from Scratch
by Brett Nelson
The problem I faced was that when I follow the tutorial on YouTube, I used unpkg to run and it worked but with the book, they use
jsdelivr and when I used the same code with the code I used for unpkg, it didn’t work.
I have no idea about what I should learn because 2 tutorials from 2 sources I used were totally different.
Code I use for unpkg
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script>
let app=Vue.createApp({
data: function(){
return {
propertyName: 'Hello from Getting to Know Vue.js!'
}
}
})
app.mount('#app')
</script>
</body>
</html>
Code I use for jsdelivr (it works but doesn't work with the code in <script> tag above):
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
propertyName: 'Hello from Getting to Know Vue.js!'
}
});
</script>
</body>
</html>
Both codes are doing the same thing at the end, it's a subtle change in syntax. Sorry if it's confusing but understand that it's actually the same thing at the end.
The jsdelivr CDN is also using Vue2, while the unpkg is using Vue3 hence the small differences in plugin them to the DOM.
I recommend the usage of SFC style anyway tho (with a build tool like Vite): https://vuejs.org/api/sfc-spec.html#sfc-syntax-specification!
I am learning SAPUI5. In the link Plunkr. I have a few question.
I am trying to create a JS view and a controller to play with. Why do I have to specify my app, page inside getCore(). what if I would do it outside getCore(). But once I initialize app and Page inside my core method, console is throwing an error. Detail explanation will be really helpful. Thanks :)`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script
id="sap-ui-bootstrap"
src= "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello SAPUI5</h1>
<div class="sapUiBody" id="content"></div>
<div id="content1"></div>
</body>
// Code goes here
//debugger
sap.ui.getCore().attachInit(function(){
new sap.m.Text({
text:"Hello World, SAPUI5"
}).placeAt("content");
var app = new sap.m.App({
initialPage : "idViewDashboard1"
});
var page = new sap.ui.core.mvc.View({
id : "idViewDashboard1",
viewName:"ViewChartContainer",
type : sap.ui.core.mvc.ViewType.JS
});
app.addPage(page);
app.placeAt("content1");
});
`
The renderer for class sap.ui.core.mvc.View is not defined or does not define a render function! Rendering of idViewDashboard1 will be skipped! -
getCore() returns the Core instance which has the attachInit() event that
will either be called as soon as the framework has been initialized
or, if it has been initialized already, it will be called immediately.
Because things are loaded asynchronously, attachInit is the best place build your app with the ui5 framework because you can rely on that everything is available and ready.
Your plunkr emits that rather obscure error message because you create an empty instance of the class sap.ui.core.mvc.View that is meant to be abstract and indeed has no renderer method. To instantiate your view you should use the sap.ui.view() method:
var page = sap.ui.view({
id : "idViewDashboard1",
viewName:"viewChartContainer",
type : sap.ui.core.mvc.ViewType.JS
});
See here: https://plnkr.co/edit/ErToSaYgyg7KJ3HX52Oj?p=preview
If you want to learn UI5 i can recommend you to read the Walkthrough. There you can read about many more useful patterns other than that mentioned attachInit() like: encapsulate your app in a component, use XMLViews, use AMD-Modules,...
I'm trying to make an SPA website with knockout and requirejs from websites I've seen and tutorials, in order to split up the website so it isn't a single gigantic thing. At one point I'm expecting to see:
My first name is: Bryan
But instead I'm getting:
My first name is: function c(){if(0<arguments.length)return c.tb(c[E],arguments[0])&&(c.ga(),c[E]=arguments[0],c.fa()),this;a.l.oc(c);return c[E]}
Starting with my index.thml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>asdf</title>
</head>
<body>
<mainview></mainview>
<!-- global imports -->
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script>
<script type='text/javascript' src="./index.js"></script>
</body>
</html>
My index.js:
"use strict";
requirejs.config({
baseUrl: '',
paths: {
knockout: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min'
}
});
ko.components.register(
'mainview',
{
require: './indexViewModel'
}
);
ko.applyBindings();
indexViewModel.js:
"use strict";
define(['knockout', 'text!./indexViewModel.html'], function(ko, htmlString) {
function indexViewModel(params)
{
var self = this;
self.firstName = ko.observable('Bryan');
}
return { viewModel: indexViewModel, template: htmlString };
});
Finally my indexViewModel.html:
<div>
<p>input name: <input data-bind="value: firstName"></input></p>
<p>My first name is: <span data-bind='text: firstName'></span></p>
</div>
All this gives the result I stated above.
Now if I change firstname to firstName(), then it initially comes up right, but if I change the input, nothing happens.
ok, with more digging and googling, I happened upon the solution. I don't get the details, but it's requirejs and knockoutjs are colliding some how
Because on my index.html, I import knockout and I have knockout setup as a requirejs parameter from the config.
I found this
Issue loading knockout components view model using requireJS
that clued me in.
ok so I made these changes:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Battlestations Character Generator</title>
</head>
<body>
<mainview></mainview>
<!-- global imports -->
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script>
<!-- no more knockout reference here -->
<script type='text/javascript' src="./index.js"></script>
</body>
</html>
now my index.js:
"use strict";
requirejs.config({
baseUrl: '',
paths: {
knockout: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min'
}
});
// "app main()"
requirejs(['knockout'], function(ko) {
var self = this;
ko.components.register(
'mainview',
{
require: './indexViewModel'
}
);
ko.applyBindings();
});
and changed <input></input> to <input />, although that changed nothing, but if that's "good practice", I'll go with it.
after those changes, reload, all works, and changing the input changes the <span> right after it.
yay!
I know an answer is accepted, Here I am posting an answer just for the users who have tried the answer and failed. I was also experiencing this issue in my MVC application. The problem was, I was referring the knockout-3.4.0.js file both in _Layout.cshtml and the my page. When I remove the JS reference from _Layout.cshtml and reference the same to only to the page, it was all fine. Cheers!
lately I have been reading through the ember documentation and following as best I can. I have made good progress which I thank God for but lately I have had troubles with routing. Specifically I can get templates to display in the application template but I cannot get children routes to display in the parent resources template. Instead the child template actually replaces it. Here's my code:
index.html
<script type="text/x-handlebars" data-template-name="modals">
<h2>Modals Parent Route</h2>
<p>This is the modals route which is common to all modals</p>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="modals/layout">
<h2>Layout Route</h2>
</script>
<script type="text/x-handlebars" data-template-name="modals/visuals">
<h2>Visuals Route</h2>
</script>
<script type="text/x-handlebars" data-template-name="modals/finish">
<h2>Finish Route</h2>
</script>
<script type="text/x-handlebars" data-template-name="modals/preview">
<h2>Preview Route</h2>
</script>
App.js
App.Router.map(function(){
this.resource('modals', { path:'/modals' }, function(){
this.route('layout');
this.route('visuals');
this.route('finish');
this.route('preview');
});
});
App.LayoutRoute = Em.Route.extend({
renderTemplate: function() {
this.render('modals.layout',{
into: 'modals',
});
}
This is not the full code but I thought it would be all that pertains to this topic. Please feel free to ask me if you need the full file contents.
the renderTemplate method you are using is completely overriding the template for modals that is why, get rid of it. Ember handles the rendering of templates for you, there's no need for it with the basic functionality you are trying to achive.
So I used ember-cli and finally figured out a way to get this working. I used the ember-cli g route to generate my routes. I ran it once for each of my routes except for application. After that things just worked properly. Here is a git repository that someone created for me that will help anyone with this same problem : https://github.com/mooror/mooror. Thanks everyone
If you want nested templates you need nested routes.
this.resource('parent', function() {
this.route('child');
});
See: http://guides.emberjs.com/v1.10.0/routing/defining-your-routes/#toc_nested-resources
I am trying to learn Ember using the docs here: http://emberjs.com/guides/templates/handlebars-basics/
I am following the example given on that link and accordingly have the following two files and contents and nothing else. However, when I go the browser and open index.html I do not see Hello World. The World part does not show up. However, according to what is explained near the bottom of that page, World should show up on the page.
Any help in understanding why this is not working would be great. Thanks!
index.html
<h2>First Ember Application</h2>
<script type="text/x-handlebars">
Hello {{name}}.
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.2/ember-1.0.0-pre.2.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
window.App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
name: "World"
});
you would need an Ember.View to pass variables into and connect with the template. You could set the Context of the controller and have the view use this as its contents, but for your simple example:
window.App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({});
App.ApplicationView = Ember.View.extend({
templateName : 'application',
name: 'World'
})
Its worth noting that Ember will look for a set of View, Controller and template with the 'application' naming convention.
Here is a link to the full fiddle http://jsfiddle.net/gNKJj/1/