How to understand an ember application code .
I want to backtrack where a variable is defined from web page to component.
example :
in web page Title : "Wonder boy"
in template it is mentioned as
{{title-works field as |f|}}
title = field.label
{{#titel-works}}
but in the component for this template i am not able to find the varaible field nor field.label . can you please provide me any resource to understand how to backtrack a ember application from web front to variable . thanks .
First of all, your template looks a bit wrong. First the variable f is never used, next title = field.label is not hbs syntax and should literally print the string "title = field.label". Is it maybe emblem?
Now I just assume you actually use a variable as in {{field.label}}.
If you dont have the variable in the component it is passed down to it when the component is called.
So either by {{your-component field=something}} (old syntax) or <YourComponent #field={{something}} /> (newer syntax).
This is indeed not very clear. That is the reason why {{field}} (and {{field.something}}) is deprecated in favor of either {{this.field}} (or {{this.field.something}}) when the data comes from the component.js (or controller.js in case of a route template) or {{#field}} (and {{#field.something}}) when it is passed down to the component, so it is always clear from where it comes.
Your best resource when debugging is the ember-inspector. It can show you the component tree, so you know exactly from where your component is called and where to look.
Related
This Ember template code...
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{rental.bedrooms}}
</div>
<div class="detail temperature">
<span>Current Temperature:</span> {{city-temperature location=rental.city}}
</div>
...results in this rendering...
How could one get the "25C" text to render on the same line as "Current Temperature" in the same way that "San Francisco" is on the same line as "Location"?
I have tried getting the city-temperature component to return only text, but (secondary question here) is it even possible for a component to return only text if the text is from a remote ajax request since the promise seems to need a DOM element to append to?
This Ember app is available here on GitHub. It's a modified version of the official Ember.js tutorial app with this "Current Temperature" detail added.
The problem is that; city-temperature is a component; and by default ember components is assigned div as their tags. Due to this; the content of city-temperature starts at a new line.
What can you do? Play with css and make sure div tag of city-temperature does not start at a new line; but instead floating right within the owner div. The second option is making city-temperature component tagless; so that it does not start at a new line. To achieve that; you can just declare:
tagName: ''
within city-temperature.js. You can see the following twiddle to see the second option I mentioned.
After reading your comments; I have forked your repository and made minor modifications to achieve what you want. You can check my repository and my corresponding commit to see what I changed.
Basically; I really did not like the idea that weather service is returning a DOM element. I have changed it to return an instance of ember promise (I mean Ember.RSVP.Promise). Within city-temperature.js I just set a retrieved weather value from weather service and set it to the component instead of making DOM modification. Finally; I modified city-temperature.hbs to render weatherValue and added a simple css item in order to prevent weather-container div to insert a new line break.
I am not sure; whether you will like my solution or not; but I guess you will retrieve the visual appearance you want. You can always rely on promises for async tasks; you do not need to create DOM elements and pass them around to components and append them to somewhere within DOM tree of the corresponding component. I believe one of the reasons we are making use of a framework like Ember is to prevent such DOM modifications. Best regards.
An ember component adds a div by default. If you don't want to add this div tag, you need to set tagName to an empty string.
That's called tagless component.
Further, for your case, you can give a tagName='span' so you will not need a span in your template.
export default Ember.Component.extend({
tagName: 'span',
classNames: ['weather-container'],
weather: Ember.inject.service(),
//rest of your code...
});
I have two Ember js components: x-group and x-item. In my template they're arranged like this:
{{#x-group title='Park details'}}
{{#x-item prop='poolSize'}}Pool Size{{/x-item}}
{{#x-item prop='shelters'}}Shelters{{/x-item}}
{{#x-item prop='benches'}}Benches{{/x-item}}
{{#x-item prop='recRooms'}}Rec Center Rooms{{/x-item}}
...
{{/xgroup}}
The {{x-item}} template looks like:
{{#if prop}} <div>{{ yield }}: {{ prop }}</div>{{/if}}
I'm trying to stripe the visible, odd {{x-item}} elements.
Things I've tried:
Finding an index for the child component--turned up a goose egg.
Trying to create a css rule like .group .item:nth-of-type(odd) but the rule matches every x-item
On x-group didInsertItem, using jQuery to find matching items and setting my stripe color. This almost works except that if the x-item doesn't display the x-group still calculates it as though it were visible (even with a selector specifically meant to find only visible elements).
I'm open to any solution.
You want to use nth-child(odd). Try: .group .item:nth-child(odd)
I am creating an Ember.Component which displays a CRUD table. As the component shall be reusable it needs a lot configuration, such as columns to display, pagination options, etc. ...
At the moment I am inserting the component using handlebars:
<div class="some-div">
{{power-table items=this.model columns='...'}}
</div>
I wouldn't want to use this nice way of inserting a component. However, it is pot really possible to extensively configure a component here, is it? I found out it's not even possible to pass an object as parameter, e.g. the following it not possible:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
How and where should I configure the component?
What you can do is that instead of setting columns=[id,name,foo,bar] in the handlebar like this:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
You can set the columns property in the controller for the handlebar template and use the name of the property in the handlebar file. So all the logic would come from the controller and the handlebar would just tell which property is accessible in the component and by what name. So the controller for the enclosing template would be the best place to heavily configure the component. Have a look at the following page for more info:
http://emberjs.com/guides/components/passing-properties-to-a-component/
I am not sure if I understood your problem correctly.
It has been 2day i am trying to figure out how to do that. I am a novice so please give as detailed explanation as possible.
I am doing this in my views.py
dict1 = simplejson.dumps(dict1)
return render_to_response('main_page.html', {
'js_testsuite':testsuite_dict,
'js_testset':js_testset,
'dict1':dict1})
In main_page.html
{% if js_testsuite %}
<select id="testsuites" name="testsuite" onchange="setOptions(document.selection.testsuite.selectedIndex);">
{% for key, value in js_testsuite.items %}
<option value={{ value }} name="testsuite">{{ key }}</option>
{% endfor %}
</select>
{% endif %}
In setoptions.js, which contains the function setOptions(value), to which i am passing selected index of the select box, and using this value i have to set the second select box and the data for this select box has to come from the views.py given above.
Also, I tried doing
var value_from_django = {{ dict1 }};
what are the other things im missing. Could you please provide a detailed explanation on this. I had been trying this for 2 days.
Is there a way in which I can pass the value from django views to the javascript directly bypassing the django template?
Can I pass the information from django views to the html template and then to the javascript?
The javascript I am referring to is a simple javascript not jquery.
Thanks for your support,
Vinay
You cannot pass values to javascript bypassing the template, unless you use an ajax call to start a separate request or unless you do something very unusual like embedding the data in a response header (don't actually do this, it is not what response headers are for!). The response, which includes the header and the body (the body being the part generated by the template) is the sum total of the information your application provides to your client, so unless you generate an additional request and fetch an additional response with ajax, you have no other options.
If you don't want to do that, then your options for passing information to the javascript via the template are basically the following:
Using an inline tag, create properly formatted javascript dynamically via the templating system. The example line you have, var value_from_django = {{ dict1 }}; is essentially what I'm talking about here, except that I'm not sure you can pass a dict through from django to javascript like that, because django's text output of a dict in the template is unlikely to be exactly the correct formatting for a javascript variable declaration. So, instead you can...
Translate your data into JSON and put that into your template, and then process that with the javascript. (This is usually done with an ajax call, but there's nothing stopping you from injecting the JSON data into the initial template directly.)
Or populate your HTML with the data you want and then use javascript to locate the HTML tag containing the data and parse the data out.
If you are trying to pass simple variables like integers, it might be easiest to do it with the first or third options. If you are trying to pass a more complex data structure like a dictionary, you will probably be better off using JSON (that's what it's for!)
I would like to give you more detailed and concrete instructions, but for that you will need to post more detail about what exactly is going wrong with your current approach and what your desired functionality is.
By the way: if it is at all feasible to include jquery on this page and use that instead of trying to use basic javascript, you should do so. It will make your life much, much easier.
My Django app has a Person table, which contains the following text in a field named details:
<script>alert('Hello');</script>
When I call PersonForm.details in my template, the page renders the script accordingly (a.k.a., an alert with the word "Hello" is displayed). I'm confused by this behavior because I always thought Django 1.0 autoescaped template content by default.
Any idea what may be going on here?
UPDATE: Here's the snippet from my template. Nothing terribly sexy:
{{ person_form.details }}
UPDATE 2: I have tried escape, force-escape, and escapejs. None of these work.
You need to mark the values as | safe I think (I'm guessing that you're filling in the value from the database here(?)):
{{ value|safe }}
Could you post a sample of the template? Might make it easier to see what's wrong
[Edit] ..or are you saying that you want it to escape the values (make them safe)? Have you tried manually escaping the field:
{{ value|escape }}
[Edit2] Maybe escapejs from the Django Project docs is relevent:
escapejs
New in Django 1.0.
Escapes characters for use in JavaScript strings. This does not make the string safe for use in HTML, but does protect you from syntax errors when using templates to generate JavaScript/JSON.
[Edit3] What about force_escape:
{{ value|force_escape }}
...and I know it's an obvious one, but you're absolutely certain you've not got any caching going on in your browser? I've tripped over that one a few times myself ;-)
Found the problem. The JSON string I'm using to render data to some Ext widgets is the culprit. Big thanks to Jon Cage. Answer accepted despite the problem being caused by another source.