I am new to Ember and most likely I am missing something very simple.
Anyway, this is my questions:
I try to add an empty input box to an HTML page the following way ...
...
var view = Ember.View.create({
templateName: 'say-hello',
});
view.append();
...
<script type="text/x-handlebars" data-template-name="say-hello">
{{view App.TextField}}
</script>
However I don't get the input box.
Feedback is appreciated.
Thanks
Ember.TextField instead of App.TextField
Related
According to the documentation it is possible to specify a template for a view with templateName:
App.ShowEntryView = Ember.View.extend({
templateName: 'my-template',
});
And we can use it like:
<script type="text/x-handlebars">
<div>
{{view App.ShowEntryView}}
</div>
</script>
Could we bind the templateName to another property? Something like:
{{view App.ShowEntryView templateNameBinding="myComputedTemplateName"}}
So that in the controller we have:
myComputedTemplateName: function() {
return "this-is-my-template-name";
}.property()
The reason why I want to do this is that I have several models which I am displaying as an heterogeneous table. I want that, whenever the user selects one of the entries in the table, a detailed view is shown, using the right template according to the underlying model.
I guess you could do this:
{{view App.ShowEntryView templateName=myComputedTemplateName}}
JS Bin example
I'm building my first Ember app and I'm trying to get it to pass and display a parameter in the view, grabbing it from the URL...
So basically if someone went to index.html#/quotes/5
I want the view to display "TEST: 5"
App.js:
App.Router.map(function(){
this.resource('quote', function(){
this.resource('quoteNumber', {path: ':quote_id'});
});
});
App.quoteNumberRoute = Ember.Route.extend({
model: function(params){
return(params.quote_id);
}
});
HTML:
<script type="text/x-handlebars" id="quote">
Test: {{outlet}}
</script>
<script type="text/x-handlebars" id="quoteNumber">
{{quote_id}}
</script>
so if I go to "example.com/index.html#/quote/3"
I'd simply want the view to display "TEST: 3",
if I went to "example.com/index.html#/quote/10"
I'd want the view to display "TEST: 10"
but right now it displays nothing, and I can't find what's missing.
The main issue is the use of quote_id in the template. Inside the template you are telling handlebars to grab the property quote_id off the model provided for that template.
Dissecting the model associated with that route you'll see that the model itself is the quote_id value, 5 or 7 etc. The model that would fit your template would be { quote_id: 5 } that way Ember/Handlebars can search for the property quote_id on the model and bind to that value.
Here's an example of what you're trying to do (note, I could have just returned the params object itself).
http://emberjs.jsbin.com/OxIDiVU/309/edit
I also added a convenient link, but you could type in any url and get what you were desiring, http://emberjs.jsbin.com/OxIDiVU/309#/quote/123123
PS. You didn't show, nor mention, but you also need an application template. This is the root of your application, if you plan on having nothing in it, you can just put a {{outlet}}
Ex.
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
or for short
<script type="text/x-handlebars">
{{outlet}}
</script>
I am trying to set up an ember app, but am recieving some strange behavior. I have two routes set up: "welcome", which is mapped to "/"; and "features", which is mapped to "/features". When navigating to "/", the welcome template correctly renders. But, when I navigate to "/features", it still renders the welcome template.
This jsbin actually works correctly: http://jsbin.com/OSoFeYe/1 , but the code below, which is from my app, does not.
App.Router.map(function() {
this.route("welcome", {path: "/"});
this.resource("features", {path: "/features"}, function() {
this.route("new");
});
});
App.FeaturesIndexRoute = Ember.Route.extend({
});
<body>
<div class="container">
<script type="text/x-handlebars">
<h1>rendered application template</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="features">
<h2>Render features</h2>
<h6>Done features template</h6>
</script>
<script type="text/x-handlebars" data-template-name="welcome">
<h2>Render welcome</h2>
</script>
</div>
</body>
Any insight to this issue would be appreciated.
Add the following to your js file and you won't need the hash anymore.
App.Router.reopen({
location: 'history'
});
Take the code from your jsbin and stick it in your app, you probably have a typo or some block of code where you shouldn't. I edited your "welcome" template to have the following link in the jsbin and it worked perfectly for me.
<script type="text/x-handlebars" data-template-name="welcome">
<h2>rendering welcome template</h2>
{{#linkTo "features"}}features{{/linkTo}}
</script>
In the welcome link it has a link that says "features" directly below the text "rendering welcome template". And when you click the link it says "rendering features template".
Ok, I think I see the issue here, and it's based on my misunderstanding of how ember routes work. I need to include a hash in my url. So my features url is /#/features, not /features.
How can you load a view or template content when ember select element changes?
I'm barely new to ember, this might be quite easy but I've been struggling too much already for this simple task. Any suggestions?
Following up on #intuitivepixel's answer, here is how to dynamically load a template based on select change.
//EMBER APP TEMPLATE
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function(){
return [
{name: 'Kris', template: 'kris'},
{name: 'Luke', template: 'luke'},
{name: 'Alex', template: 'alex'}
];
}
});
App.EmbeddedView = Ember.View.extend({
templateName: Ember.computed.alias('controller.selected'),
templateNameDidChange: function() {
this.rerender();
}.observes('templateName')
});
<script type="text/x-handlebars">
<h4>Load a view on ember select change?</h4>
{{view Ember.Select
contentBinding="this"
optionValuePath="content.template"
optionLabelPath="content.name"
valueBinding="selected"
prompt="Please select a name"
}}
<hr/>
{{view App.EmbeddedView}}
</script>
<script type="text/x-handlebars" id="luke">
THE LUKE TEMPLATE
</script>
<script type="text/x-handlebars" id="alex">
THE ALEX TEMPLATE
</script>
<script type="text/x-handlebars" id="kris">
THE KRIS TEMPLATE
</script>
This example will switch between the luke/alex/chris templates depending on the select box.
See this jsbin for a live example: http://jsbin.com/uzekop/1/edit
Although you should post some code of what you have tried, this example might help you get started so you can improve your question.
See here for an example on how you could change a button label depending on the selected value of a select box.
Hope it helps.
I have an application with items.
I would like to display checkboxes for a list of values in an item.
I use a Checkbox to do this:
App.DisplayedValueCheckbox = Em.Checkbox.extend({
itemValuesBinding: 'parentView.item.values',
checked: function () {
return true; //Default value is always true
}.property('content', 'itemValues.#each'),
click: function (evt) {
//update graph
}
});
And try to display it into a collection view:
App.DisplayedValuesView = Em.CollectionView.extend({
contentBinding: 'App.Item.values'
,itemBinding: 'App.Item'
, tagName: 'ul'
, itemViewClass: Em.View.extend({
itemBinding: 'parentView.item'
, templatename: 'displayed-values'
})
});
which is part of a parent view:
<script type="text/x-handlebars" id="item">
<h1>{{name}}</h1>
<hr><p>{{desc}}</p>
<div>
<div>
{{#each item in values}}
<li>{{item}}</li>
{{/each}}
</div>
<div>{{view App.DisplayedValuesView}}</div>
</div>
</script>
But the view does not display the checkboxes and there is an error:
Unable to find view at path 'App.DisplayedValuesView'
Edit: this error was corrected thank to #sly7_7's answer
Here is the jsFiddle of this problem
I know I miss something, but what ?
Something in the bindings (I am not sure how they work) ?
Should I write a specific Route (App.ItemRoute = ...) ?
Defining the checkbox view ? The template ?
The mistake is that your declare your App as a local var. Ember/Handlebars helpers needs global when you want to reference a view from the application namespace.
So just remove the 'var' before App :)