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
Related
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.
I am trying to implement the instafeed tutorial to just show some instagram pictures.
I am working on PyCharm using Django.
Here is my folder hierarchy:
/test_project/js/instafeed.min.js
I have a suspicion that I am not referencing the 'src' correctly. I had 'Cannot resolve directory' warnings before, but I got them to disappear by playing around with the Source preferences.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
</style>
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'b8dacdbf587f41798d8dfb03e3f7a29',
useHTTP: true
});
feed.run();
</script>
</head>
<body>
<div id="instafeed">
</div>
</body>
</html>
I used the 'useHTTP:true' because I saw on another answer that this needs to be set to true to work on a local machine. I've looked at how the code was used in other tutorials and implementations, but I don't see how my code is any different.
Thanks for the help!
Instafeed needs jQuery (the documentation says that you don't need, but i got some errors without it), so make sure you have both libs loaded correctly.
Try with this:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.lukej.me/instafeed.js/1.2.0/instafeed.min.js"></script>
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.
:/
Ember inline templates are wrapped in DIVs. I'd like to wrap them with a different tag. How do I do that?
The following template:
<script type="text/x-handlebars">
Foo
</script>
generates something like:
<div>Foo</div>
I'd like to generate something like:
<someOtherTag>Foo</someOtherTag>
I don't think that is possible in the current version 0.9.3 . If you look at https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js#L707 div is used when the property tagName is not set.
You could define your own Ember.View and set the tagName but I guess you want to achieve this without creating your own view class.
UPDATE
I found a way via specifying your custom view as data-view attribute on the script element.
<head>
<script type="text/javascript" >
App = Ember.Application.create({});
App.View = Ember.View.extend({
tagName: 'someOtherTag'
});
</script>
</head>
<body>
<script type="text/x-handlebars" data-view="App.View" >
Foo
</script>
</body>
See http://jsfiddle.net/9F7kR/2/