As-salamu-wa-alicum
Every body,
I have a index.html with
<script type="text/x-handlebars" data-template-name="application">
<div id="tabcontent" class="post" contenteditable="true">
{{outlet}}
</div>
</script>
applicationView.js with
App.applicationView = Ember.View.extend({
template:Ember.Handlebars.compile('welcomeTemplate.hbs')
,templateName:'application'
});
In js/templates/welcomeTemplate.hbs is
<div><p>Welcome</p></div>
In app.js I have
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({ });
In console log I am getting
DEBUG: -------------------------------
DEBUG: Ember : 1.6.1
DEBUG: Handlebars : 1.1.2
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
generated -> route:application Object { fullName="route:application"}
generated -> route:index Object { fullName="route:index"}
generated -> controller:application Object { fullName="controller:application"}
Rendering application with default view <(subclass of Ember.View):ember211> Object {
fullName ="view:application"}
generated -> controller:index Object { fullName="controller:index"}
**Could not find "index" template or view. Nothing will be rendered Object {
fullName="template:index"}**
log:
Transitioned into 'index'
Please tell me what is going on here and why am I not see the "Welcome" in browser at /index.html? How will I see "Welcome" in browser at /index.html?
Thank you very much
With best regards
Nadvi.
It doesn't make sense to have both a template and a templateName. Additionally application should be uppercase.
App.ApplicationView = Ember.View.extend({
template:Ember.Handlebars.compile('Hello {{name}}<br/>Name: {{input value=name}}')
});
Ember doesn't load files for you, so stating a hbs name won't do anything, it'll just think of it as a plain string you wanted to show in the page.
http://emberjs.jsbin.com/joyiqute/1/edit
Related
I am trying to integrate FlowJS with EmberJS. I was successful to upload data to server, so, I am good on that part.
I am unsuccessful When trying to bind flow object data with emberJS component to show data via handlebars. For some reason data binding is not working.
Here is an example of the code.
HTML
<script type="text/x-handlebars" data-template-name="index">
{{flow-uploader}}
</script>
<script type="text/x-handlebars" id="components/flow-uploader">
<div class="drop"></div>
<!-- file list -->
{{#each file in flow.files}}
<p>File name: {{file.name}}</p>
{{/each}}
</script>
JS
App = Ember.Application.create({
rootElement: '#main'
});
App.FlowUploaderComponent = Ember.Component.extend({
flow: function(){
return new Flow({
target: 'http://google.com',
testChunks: false
});
}.property(),
initDropZone: function(){
var flow = this.get('flow');
var drop = this.$('.drop')[0];
var $this = this;
flow.assignDrop(drop);
/*flow.on('fileAdded', function(file, flow){
});
flow.on('filesAdded', function(files){
});
flow.on('fileSuccess', function(file,message){
console.log('file success');
});
flow.on('fileError', function(flow, message, chunk){
console.log('file error');
});*/
flow.on('filesSubmitted', function(){
console.log($this.get('flow').files);
//flow.upload();
});
/*flow.on('complete', function(event, flow){
console.log('completed');
});
flow.on('uploadStart', function(event, flow){
console.log('uploading..');
});
flow.on('fileProgress', function(flow, file){
});*/
}.on('didInsertElement')
});
Example can be seen live at http://jsfiddle.net/sisir/qLuobq48/2/
Basically what I am doing here is to save the flow object as component property. files property of flow object is the array of file to be uploaded. Once we drag and drop or select multiple files to upload the files array gets updated. We can see it on the console. The logging code is added via filesSubmitted event.
From the handlebars expression each file is iterated from the files queue. Initially it is empty but later when it gets populated it doesn't show on the html. The data binding is not working for some reason.
In your component logic:
App.FlowUploaderComponent = Ember.Component.extend({
flow: function(){
return new Flow({
target: 'http://google.com',
testChunks: false
});
}.property(),
initDropZone: function(){
var $this = this;
var flow = this.get('flow');
var drop = this.$('.drop')[0];
flow.assignDrop(drop);
flow.on('filesSubmitted', function(){
//for setting a single property
$this.set('flowFiles', flow.files);
//for setting multiple properties
// $this.setProperties({'flowFiles': flow.files, /* etc.. */});
});
}.on('didInsertElement')
});
In your template:
<script type="text/x-handlebars" data-template-name="index">
{{flow-uploader}}
</script>
<script type="text/x-handlebars" id="components/flow-uploader">
<div class="drop"></div>
<!-- file list -->
{{#each file in flowFiles}}
File name: {{file.name}}
{{/each}}
</script>
See JSBin Example
The problem with your JSFiddle simply is(/was) that you referenced a text/plain file as JavaScript. As I asked here, not every file is usable in JSFiddle and GitHub does not like to get misused as pseudo-CDN for lazy people.
In other words: This error
Uncaught ReferenceError: Flow is not defined
is a result of this error
Refused to execute script from 'https://raw.githubusercontent.com/flowjs/flow.js/master/dist/flow.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
and can be fixed using
https://rawgithub.com
or the MaxCDN version
http://rawgit.com/
in place of the branch file URl.
Look at the new JSFiddle with all the console.log() statements. The files added, file added and submitted logs in the console are telling me that everything in your code works fine once you got the right file in use. PROTip: Always check your console for errors.
I have a index.html like folows
<body>
<script type="text/x-handlebars" data-template-name="application">
<h2> Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2> Welcome to index</h2>
</script>
</body>
In browser, I see only "Welcome to index" why not
Welcome to Ember.js
Welcome to index
My route related code is
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({ });
My view related code is
App.ApplicationView = Ember.View.extend({
templateName:'index'
});
I use the following js
head.load("css/style.css",
"js/libs/jquery/jquery-1.10.2.js",
"js/libs/jquery/jquery-ui-1.10.4.js",
"js/libs/jquery/jquery.sizes.js",
"js/libs/jlayout/jlayout.border.js",
"js/libs/jlayout/jquery.jlayout.js",
"js/libs/jquery/mutate/mutate.events.js",
"js/libs/jquery/mutate/mutate.js",
"js/libs/handlebars-1.3.0.js",
"js/libs/ember/ember-1.6.1.js",
"js/app.js",
"js/views/applicationView.js"
);
I have seen that if I have removed
templateName:'index'
from
App.ApplicationView
the index template have not remmoved the application template elements but throw a bug
DEBUG: -------------------------------
DEBUG: Ember : 1.6.1
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
debug:
generated -> route:application Object { fullName="route:application"}
generated -> route:index Object { fullName="route:index"}
generated -> controller:application Object { fullName="controller:application"}
Rendering application with <App.ApplicationView:ember212> Object {
fullName="view:application"}
generated -> controller:index Object { fullName="controller:index"}
Rendering index with default view <Ember._MetamorphView:ember228> Object {
fullName="view:index"}
Transitioned into 'index'
TypeError: document.getElementById(...) is null
document.getElementById( this.morph.start ).parentNode ===
ember-1.6.1.js (line 32241)
Unfortunaltely, the example for links in the Ember guides (http://emberjs.com/guides/templates/links/) does not work somehow for me.
To show a list of tempworkers, and have a link for each tempworker to the detail page, I use the following code:
HTML:
<script type="text/x-handlebars" data-template-name="tempworkers">
<div>
{{#each controller }}
<tr>
<td>{{#linkTo 'tempworker' this}} {{firstname}} {{/linkTo}}</td>
<td>{{initials}}</td>
<td>{{completeSurname}}</td>
</tr>
{{/each}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="tempworker">
<div id="tempworker">
<p>{{view Ember.TextField valueBinding='firstname'}}</p>
<p>{{view Ember.TextField valueBinding='initials'}}</p>
<p>{{view Ember.TextField valueBinding='surnamePrefix'}}</p>
<p>{{view Ember.TextField valueBinding='surname'}}</p>
</div>
</script>
Javascript:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
ENV.EXPERIMENTAL_CONTROL_HELPER = true;
});
App.Store = DS.Store.extend({
revision : 11,
adapter : DS.RESTAdapter.extend({
url : 'http://dev.start.flexplanners.com/api'
})
});
App.Router.map(function() {
this.route('tempworkers'); // /tempworkers
this.route('tempworker', { path: '/tempworkers/:id' }); // /tempworkers/:id
});
App.TempworkersRoute = Ember.Route.extend({
model : function() {
return App.Tempworker.find(); // return All tempworkers to the TempworkersController
}
});
/* TODO: Question -> According to http://emberjs.com/guides/routing/defining-your-routes/, this should be working by convention, and NOT explicitely defined here?
* But when I leave it out, it's broken :(
* */
App.TempworkerRoute = Ember.Route.extend({
model : function(params) {
return App.Tempworker.find(params.id); // return tempworker by id to the TempworkerController
}
});
Use cases:
When I visit the URL /tempworkers, the app fires a request
to my server API, and return the list in my tempworkers view.
When I visit the URL /tempworkers/[UUID], the app fires a
request to my server API, and return the requested tempworker
in my tempworker view.
When I click a generated link in the list of tempworkers, the app routes me
to /tempworkers/<App.Tempworker:ember343:47cfa9f2159d45758ceacc4c15ae1671>,
and shows the details in my tempworker view
My questions are as follows:
1) Are these 3 use cases showing expected behaviour?
2) If yes, does this show a distinction between 2 states, 1 is a fresh URL visit (including server API call), and 1 transitionTo another view, with a parsed in reference to a single object from the list?
3) If yes, when will be a moment to reload the list, and update the items in the list?
4) If no, how will I be able to have the linkTo generate a href like '/tempworkers/[UUID]', and let the app make a server API call to get the details of the tempworker?
Thanks in advance for your time!
Rainer.
You are doing it right, you've just made a typo, your route needs to be /tempworker/:tempworker_id.
App.Router.map(function() {
this.route('tempworkers'); // /tempworkers
this.route('tempworker', { path: '/tempworkers/:tempworker_id' }); // /tempworkers/:id
});
Ember uses the provided dynamic key when looking for a model to deserialize.
I have the following controller:
App.ShowController = Ember.Controller.expend({
buttonTitle: 'Create'
});
And the following template show.handlebars
<a href='#'>{{buttonTitle}}</a>
but the text is not rendering. Is there a special call to access the attribute?
Normally, when a view is displayed (via the Router), the context of the view is automatically set to the controller, so there should be nothing to do special.
Here is an example, where the MyApp.IndexController is automatically set as the context of the IndexView (and its template is the index template):
MyApp = Ember.Application.create({});
MyApp.Router = Ember.Router.extend();
MyApp.Router.map(function(match) {
match('/').to('index');
});
MyApp.IndexController = Ember.Controller.extend({
buttonTitle: "create"
});
The template:
<script type="text/x-handlebars" data-template-name="index">
{{buttonTitle}}
</script>
And you could try it on this JSFiddle.
N.B.: I'm using Ember v1.0.0-pre.2-239 here. There are some changes to do for upgrading this example to master
I can't understand something in Ember.js, my contains a property, but in order to display it i have to do {{view.property}}, why can't I simple use {{property}} ?
in the following example only {{view.test}} is displayed.
shouldn't the view be the default scope ?
index.html:
<script type="text/x-handlebars" data-template-name="places">
{{test}} {{view.test}}
</script>
app.js:
App.PlacesController = Ember.ArrayController.extend({
});
App.PlacesView = Ember.View.extend({
templateName: 'places',
test: 'test'
});
As of Ember 1.0pre, the context for handlebars helpers in your template has been changed to be the controller.
Before that, it was the view. The view keyword is available to access properties from the view.
Try adding a test property to your controller and see what happens.