I'm new to ember.js (but I know MVC from my CakePHP experiences and JS as well)
and in the last 2 weeks I build a little app at work which loads
sideloaded JSON data with the REST-Adapter. I added some buttons with actions
and everything works fine and I learned a lot, but it takes time to figure out the details.
All my controllers, routes and models are not organised at the moment in a folderstruture
which is described in the ember.js-Guide: http://guides.emberjs.com/v1.12.0/concepts/naming-conventions/
Now I want to move the files to the folderstructure. But then the application does not work.
It seems to my that the resolver can not finde the files at runtime. But why?
An easy example which does not work:
in "app.js" (loaded with -tag in "index.html"):
App = Ember.Application.create({
LOG_RESOLVER: true // just for debugging
});
in "router.js" (loaded with -tag after "app.js" in "index.html"):
App.Router.map(function(){
this.route('mytest');
});
in "routes/mytest.js":
export default Ember.Route.extend({
setupController: function(controller) {
controller.set('title', "Hello world!");
}
});
in "controllers/mytest.js":
export default Ember.Controller.extend({
appName: 'mytest'
});
in "indes.html":
<script type="text/x-handlebars">
{{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
mytest Template
<h1>appName: {{appName}}</h1>
<h2>title: {{title}}</h2>
</script>
The Handlebar-template "mytest" is showen, but {{appName}} and {{title}} are empty.
If I moved the "mytest"-Template to "templates/mytest.hbs" nothing is showen.
Seems to my that the resolver does not work. Or something wrong with the naming-conventions Guide?
My another assumption:
Resolver-Stuff only works when using a buildprocess like in ember-cli.
Using "ember-1.12.1.debug", "ember-template-compiler-1.12.1"
Thanks for help.
-update-
Here the "index.html" - simple example:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
</head>
<body>
<script type="text/x-handlebars">
{{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
mytest Template
<h1>appName: {{appName}}</h1>
<h2>title: {{title}}</h2>
</script>
<script src="libs/jquery-2.1.4.js"></script>
<script src="libs/ember-template-compiler-1.12.1.js"></script>
<script src="libs/ember-1.12.1.debug.js"></script>
<script src="app.js" ></script>
<script src="router.js" ></script>
</body>
</html>
At the moment I guess that the ember.js guide about naming conventions (guides.emberjs.com/v1.12.0/concepts/naming-conventions) left out, that "Ember.js uses a runtime resolver to wire up your objects without a lot of boilerplate" only works with "ember-cli" or the older "ember app kit" or another tool, but not when the application is running. So no JS-Files will be loaded from the server from while running the JS-application.
Related
I'm trying to implement unit testing within my SAPUI5 Application. I understand how to perform the unit tests --but I'm not understanding how to configure the testing in my SAP UI5 application. I believe the problem is how I'm attempting to load in the controller I want to test. I have a basic tree structure like so:
I'm unfamiliar with how to set up the tests. When I insert the following controller, I get a script error:
test.js
sap.ui.require(["../Controller/Main.controller.js"],
function(MyController){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="tests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
screenshot of the error
How can I properly load in the controller.js that I would like to test?
Try including like this
jQuery.sap.registerModulePath("controller", "../Controller");
jQuery.sap.require({
modName : "controller.Main",
type : "controller"
});
QUnit.test("Some text", function() {
var oCont = sap.ui.controller("controller.Main");
});
I have written a html with a div.
I have two hbs files. I rendered one as partial and other as normal. I am not able to invoke action on the templates. I am getting missing helper error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="holder">
</div>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
var data={title: "My New Post", body: "This is my first post!"};
function getTemplate(templateName,hbsPath,type){
$.ajax({
url: hbsPath, //ex. js/templates/mytemplate.handlebars
cache: true
}).done(function (src) {
if (type === "partial") {
Handlebars.registerPartial(templateName, $(src).html());
} else {
template = Handlebars.compile($(src).html());
temp=template(data);
$("#holder").append(temp);
}
});
}
getTemplate("dummy","/Test/templates/dummy.hbs","partial");
getTemplate("dummy","/Test/templates/application.hbs");
App = Ember.Application.create({});
App.Router.map(function(){
this.resource('dummy');
});
App.ApplicationController=Ember.ObjectController.extend({
needs:['dummy'],
actions:{
refresh: function(){
alert("application template refresh");
}
}
});
App.DummyController=Ember.ObjectController.extend({
actions:{
refresh: function(){
alert("dummy template refresh");
}
}
});
HBS:
application.hbs:
<script id="application" type="text/x-handlebars-template">
{{> dummy}}
</script>
dummy.hbs:
<script type="text/x-handlebars" data-template-name='dummy'>
<div {{action 'refresh' target="controllers.dummy"}}>
Refresh
</div>
<div {{action 'refresh'}}>
Refresh
</div>
</script>
The code in ur demo and the code in question are different. Here is a fixed demo based on the code in ur question.
Fixing the demo u provide may need you to include the vanilla handlebars library as ember is now using HTMLBars which is built on top of handlebars but a bit different.
Em.Handlebars.compile is now actually using HTMLBars compile method. You can see here.
You may need to use something like https://github.com/rwjblue/broccoli-ember-inline-template-compiler
I have seen this work in previous versions of Ember but I cannot get it to work in version 1.8
I would like the addNewView method in the index controller to create and add new App.ReusableView with its designated template as an element to the DOM div. I have tried several combinations and none work with this ember version.
OR, am I approaching this wrong and have the template using an {{#each}} to read from a model and have the controller just add elements to the controller?
jsbin: http://jsbin.com/xidoqo/1/edit?html,js,console,output
error
Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playground Ember</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-v3.1.1.min.css">
</head>
<body>
<script type="text/x-handlebars">
<h2>main page</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<button {{action 'addNewView'}}>addNewView</button>
<div id='divHolderId'></div>
</script>
<script type='text/x-handlebars' data-template-name='reusable'>
my reusable view content
</script>
<script src="js/libs/jqueryv1.11.0.min.js"></script>
<script src="js/libs/bootstrapv3.1.1.min.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-1.8.1.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
App = Ember.Application.create();
App.IndexController = Ember.Controller.extend({
actions: {
addNewView: function() {
console.log('addNewView called');
var view = App.ReusableView.create();
view.appendTo('#divHolderId'); // error:
}
}
});
App.ReusableView = Ember.View.extend({
templateName: 'reusable'
});
edit1: (also tried instantiating a ContainerView with the same error)
addNewView: function() {
console.log('addNewView called');
var container = Ember.ContainerView.create({
childViews: [App.ReusableView.create()]
});
container.appendTo('#divHolderId');
}
If you absolutely must use views, then this will work: http://jsbin.com/zufomiweqe/2/edit
It's a little strange, though, the Ember.ContainerView's API didn't really get too much love when it was implemented. One of the bad things is that any actions to be triggered on the ContainerView have to be triggered via view.parentView, since the child views don't directly have access to the ContainerView's context.
Try that out, though, I hope it works out for you :-)
Have you checked out components at all? What you're describing feels very much like the way that we did things in Ember before components existed, and it was all very unwieldy and error-prone.
I'm not sure about your specific use-case, but I would have an array that represents the contexts for your views, and clicking addNewView would simply push a context to the array. In your template:
{{#each thing in contexts}}
{{my-new-component thing}}
{{/each}}
I recently decided to try Ember.js.
I set up a small application, but I can't get something to work.
I have a file app.html
<!doctype>
<html>
<head>
...
</head>
<body>
<script type="text/x-handlebars">
...
</script>
</body>
</html>
Now, of course, this doesn't render anything. I include handlebars.js, ember.js, and app.js and now then everything renders properly.
The problem is that when I try to add something with curly braces, the output is blank. For example, if I set some variables in my JS files and want to display it in my app, like <h1>{{title}}</h1>, I get <h1></h1>. When I try to put {{input value="Username"}}, nothing gets displayed.
I get no error messages, except when I use closing tags. For example, this
{{#link-to "http://google.ca"}}Link{{/link-to}}
Will make my whole web page simply display
line 117: interleaved closing tag: link-to
I have no idea what is wrong. Even googling the error message doesn't help much.
Any hint?รง
UPDATE
This code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script type="text/javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Link
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
Renders a blank page with this error message:
line 36: interleaved closing tag: each
I'm not sure that's normal.
link-to is meant for ember routes only. (http://emberjs.com/guides/templates/links/)
In your case I would just write the html for the link in the template directly.
Here is a small sample ember.js app with the google.ca link, I have a feeling that your html may not be setup correctly with an outlet and a template:
http://emberjs.jsbin.com/qivunivabo/3/edit
I found the problem and this is really stupid.
My HTML files are delivered by a framework that uses Mustache as its template engine (server side) and therefore it renders all the {{something}} tags before sending the output to the broswer.
:/
So I'm tossing around an idea for a presentation for work to try to show the power of Ember. I planned on starting at some of the primitives and showing that things can technically stand on there own, but Ember works best when you adhere to patterns. Anyways I would like to just render a view. In the Ember Guides under view there is this example:
View
var view = Ember.View.create({
templateName: 'say-hello',
name: "Bob"
});
view.appendTo('#container');
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.7.prod.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="container"></div>
<script type="text/x-handlebars" id="say-hello">
Hello, <b>{{view.name}}</b>
</script>
</body>
</html>
http://jsbin.com/EPuwApE/3/edit
This does not work. Why?
You have a few issues.
When you create a template, name it with the data-template-name attribute.
In order for your view to find the template, you must create an Ember.Application even if you don't use it.
Alternatively, if you'd prefer not to do the above, you can inline your template in the view, compile it, and set it to the view's template property. I commented it out as an example.
Check out this updated jsbin.
You missed to create an instance of Ember application like
App = Ember.Application.create({
});
Working Bin