I'm new in Ember.
As I know, the Ember is consist of [.js/.hbs(handlebars)].
when I search the component in the google, I got 2 kinds of source.
1st is like 'HTML'
<input type="checkbox" class="btn btn-success active" />CheckBox01<br />
and 2nd is like more 'Ember'.
{{input type="checkbox" checked=true}}CheckBox02
but I think these are same.. so I don't select what I use.
Frankly I want to follow 2nd style, but when I try it('https://www.npmjs.com/package/ember-cli-toggle'), I got failed.
so I just use 1st style these days. and It is more easy to me because I used to handle HTML.
Anyway, the question is what are the different between Ember Style and HTML Style.
Thanks.
Value binding is the main difference. You can as well do dynamic value binding and since they are handlebars, you get the sophistication of many more helpers.
Please read Ember documentation here, if you have not so.
https://guides.emberjs.com/v2.10.0/templates/input-helpers/
Thanks
Related
I just upgraded my Ember addon from version 3.0 to version 3.8, and I get this warning now:
Interaction added to non-interactive element no-invalid-interactive
An example of this is something like:
<div class="some-class" onclick={{action "selectDate" "today"}}>
<div> more content </div>
</div>
When you click the action, it should take you to a new route.
What are my options to fix it the right way, so that it is accessible?
The solution here depends on what the action should do.
Refactoring an action that triggers a transition
Since this action takes the user to a new route, it should be a link element, <a> and not a button. This gives assistive technology/screen reader users a clue that interacting will take them somewhere new in the app.
This can be refactored to a link-to in Ember, which will wrap the content in <a>:
{{#link-to someRoute}}
<div> more content </div>
{{/link-to}}
someRoute could be a computed property if it needs to be informed by multiple pieces of data. Otherwise, it could be a string.
Refactoring an interaction that keeps you on the same page
In cases where the action does not take you to a different page, it may be appropriate to use a <button>. An example of this would be a button that expands a collapsible container or toggles a setting. However, the w3 validator tells us that you can't put divs inside of buttons. You can use Phrasing Content that is non-interactive, such as <span>.
<button class="some-class" onclick={{action "toggleSomething"}}>
<span> more content </span>
</button>
Learn More
To catch more accessibility problems in an app, try out ember-a11y-testing which audits your app for problems and gives you a report of how to fix them.
This question was answered as part of "May I Ask a Question" Season 2 Episode 3. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/nQsG1zjl8H4
Hello I ask pretty much a similar question yesterday and I don't know why it behaves like that at least for me
<label>Upload songs/images
<label for="song" class="button small-12 hollow">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
And when I try attaching a plug-in (jQuery plugin) to that input element I'm asking for help is because I would really like to use it thanks and I have asked everywhere and tried searching online but no luck.
Was trying to use this with button https://www.fyneworks.com/jquery/multifile/
Any suggestions are welcome.
Full answer available in response to your other question; in short, the label needs to wrap around the file input control, and remove the label's for attribute.
I have a simple question which I'm hoping someone will nail in not time.
I'm just running through some Acceptance tests with Codeception and I'm attempting to click a submit button of type image:
<div id="payment">
<input name="submit" type="image" value="" alt="Review your order" src="/images/buttons/pay-securely.png">
</div>
Simply using $I->click() results in a failing test:
$I->click('#payment > input[name=submit]');
Any ideas?
I too have run into trouble with unambiguously specifying what I want to be clicked. Here are two workarounds I have found:
Use a CSS class, or better, an ID, as a selector:
$I->click(['id'=>'myButtonID']);
Use JavaScript / JQuery to trigger the click:
$I->executeJS("$('input[name=submit]').click();");
I prefer the former, because it is easier to do, but I use the latter for cases e.g. where I don't have much control over the code being tested.
I've been in touch with Codeception directly with no reply on the matter. With no way of testing this (and the obvious design flaw in using an image submit button - I mean, are we in the 90s or what?!) I've now changed the input to a proper submit button and CSS that bad boy!
Thought I'd answer my own question and leave it here in the (hopefully unlikely) event that another poor soul has inherited shoddy work.
I'm trying to create a simple Ember.js app to learn more about JavaScript MVC frameworks. However, it appears applying CSS styles to a view template isn't possible (or rather, I am ignorant of the proper way to do this):
Without template
<span class="myClass">
Some value
</span>
In this case, the style appears properly, as expected.
With template
<span class="myClass">
<script type="text/x-handlebars>
{{MyApp.someVariable}}
</script>
</span>
In this case, the style doesn't seem to be applied at all.
I even tried something like:
<script type="text/x-handlebars>
{{MyApp.someVariable classToAdd="myClass"}}
</script>
Which creates an even more bizarre output (I can't even find that element in the Chrome developer element tab).
Online tutorials don't mention this issue and I have tried researching other Stackoverflow issues (there are some about applying styles but not exactly like in this situation). Can anyone enlighten me as to what I am not doing properly?
I normally use ClassNames and classNameBindings property of Ember Views. That get the job done most of the time.
You can also try Ember layout property to wrap the template.
Found answer to this question in jquery's append() documentation
You need to convert text into html using jQuery:
template = Handlebars.compile(..);
html = template(json);
$('body').append($(html)); // <- don't forget to wrap it
I'd like to user Ember to create an 'informational sign' type of application; The data displayed will be updated on a regular basis, but there is no user input or interaction. The application is configured and initialized based on URL parameters provided by an administrator. The layout and content of the application will change depending on the data in the feed the application is monitoring.
Ember.Router seems like overkill for this task because I don't need/can't have URL-based routes mapped to application state. Ember.StateManager seems perfect because it allows me to programmatically transition between states depending only on conditions met within the logic of my application, ignoring the current URL. The deprecated Ember.ViewState seems like it was the way to manage views when using Ember.StateManger.
What is the current best practice for managing views in the DOM with Ember.StateManger?
Is there a way to do what I'm describing with Ember.Router instead?
Thanks,
Aaron
After reading your primary explanation, I feel that you dont need any states at the moment. You need diferent application stated defined when application needs different behaviour in those states. Looks like your application behaviour is not changing but just view.
So you can just use some handlebars condition helpers to make this work along with some derived attribute in your controller indicating whether there is any current advisory.
{{#view App.myView}}
{{#if hasAdvisory}}
<div class="col-2">
<div class="col1">
{{#each bus}}
//bus details
{{/each}}
</div>
<div class="col2">
//advisory details
</div>
</div>
{{else}}
<div class="col-1">
<div class="col">
{{#each bus}}
//bus details
{{/each}}
</div>
</div>
{{/if}}
{{/view}}
Please explain more like if you just need this or do you plan any different application behaviours when you have advisory and when you dont have.
In general, the same techniques used to manage views and controllers in Ember.Router-based apps can be used with Ember.StateManager. Specifically, using outlets with Em.Controller#connectController is an excellent way to switch views that is independent of state management.