I have my template something like this,
<ul id="items">
{{#each items as |item index|}}
<li>
<!-- <input type="checkbox" id={{concat "pf" index}} /> -->
{{input type="checkbox" id=(concat "pf" index)}}
</li>
{{/each}}
</ul>
And I have my js something like this,
import Ember from "ember";
export default Ember.Controller.extend({
appName: "Ember Twiddle",
items: [{}],
init: function() {
$(document).on("click.somename", function (e) {
alert($(e.target).parent().length); //should get parent as "li" and length as 1
});
}
});
What happening for my project is that, if I click on ember input helper I am not able to get the parentElement using jQuery. But when I changed that input helper to normal <input type="checkbox" />, I am able to get the parentElement. I don't know whether Safari/Ember is using any virtual DOM or something to render its own helpers. This issue is happening only in Safari. In Chrome, it is working fine.
Unfortunately, I am not able to make a fiddle/plunker as the issue is not able to replicate in them. Sorry about that. In my project, I am using ember#2.7.3.
Any suggestions/help on this issue?
While I'd recommend trying to find a way to avoid using the jQuery click event in the first place, it sounds like an issue with how the different browsers treat parent. I would prefer to use .closest('li').eq(0) to access the first parent that matches the element you are looking for.
Related
I have a custom select web component created with StencilJS and I am using it in AngularJS like this:
<my-select>
<my-option ng-repeat="item in items">
{{item.value}}
</my-option>
</my-select>
The problem is that whenever I push a new item on the items array (items.push({key: 'some', value: 'Some Value'})), the expression seems to print also it's own syntax in the DOM like this:
This is the <my-option> StencilJS component structure:
render() {
return (
<div class="option-container" onClick={this.selectOption(this)}>
<slot />
</div>
);
}
Any help would be so much appreciated. Thank you.
Did you tried some newer Browser like the newest Firefox or Chrome? I faced some really stupid issues because Edge Browser for example does render the <slot tag as an String initially and just renders the innerHTML once. The other Browser will keep the slot as an DOM Element so its more dynamic.
{{#each alarms as |alarm|}}
{{if alarm.isEditing}}
{{#modal-dialog translucentOverlay=true close="cancelAlarmEdit"}}
//this works down here
<button type="btn btn-danger" {{action 'cancelAlarmEdit' alarm}}</button>
{{/modal-dialog}}
{{else}}
{{/if}}
{{/each}
Is there a way to pass a model into cancelAlarmEdit from the close tag above? I had trouble finding relevant info on it from https://github.com/yapplabs/ember-modal-dialog .
I'm pretty sure this should work:
{{#modal-dialog close=(action 'cancelAlarmEdit' alarm)}}
Actually the {{action}} helper is pretty similar to Javascripts bind.
I don't see such feature neither in docs, nor in the source code of this addon. You may try to create a new component, based on this addon's:
// app/components/modal-dialog.js
import ModalDialog from 'ember-modal-dialog/components/modal-dialog';
export default ModalDialog.extend({
actions: {
close() {
this.sendAction('close', this.get('closeParam'));
}
}
});
In template your should be able to pass closeParam attribute.
And if you will not succeed in extending, it's not that hard to write your own modal component.
I'm working through Ryan LaBouve's YouTube tutorial on building the TodoMVC app with Ember CLI. I'm about half way through, now adding a conditional within the template. When a (todo list) item is double-clicked, it is supposed to trigger a function editTodo that sets a property "isEditing" to true and replaces the text with an input box.
The doubleClick function is not working at all. It throws the following error in the console:
Uncaught Error: Nothing handled the action 'editTodo'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
This is the relevant template section (todos.hbs):
<section id="main">
<ul id="todo-list">
{{#each todo in model itemComtroller="todo"}}
<li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
{{#if todo.isEditing}}
<input class="edit">
{{else}}
{{input type="checkbox" class="toggle" checked=todo.isCompleted}}
<label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label><button class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
Here is the controller with the "editTodo" function (todo.js):
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions: {
editTodo: function() {
this.set('isEditing', true);
}
},
isEditing: false,
isCompleted: function(key, value) {
var model = this.get('model');
if (value === undefined ) {
return model.get('isCompleted');
} else {
model.set('isCompleted', value);
model.save();
return value;
}
}.property('model.isCompleted')
});
I've cross-referenced my code with the video and the associated Github repo and still can't find the cause of the problem. There are also related issues on SO, but I've not seen one quite like this. Obviously I am new to Ember.js and can use all the help I can get.
THANKS!
It seems that you've run into a bug that was introduced in Ember 1.13.4. I'm not sure what it is, but it has to do with using an item controller and having an action in the loop. For now, you can downgrade to Ember 1.13.3 or lower to fix the issue. I will file a bug report so that this can be fixed in later versions of Ember.
Long term you won't be writing code like this. Item controllers have been completely removed in Ember 2.0, so you'll likely switch to using components for this type of situation when using Ember 2.0. For now you can practice using Ember 1.13.3.
Almost forgot:
Code that works in 1.13.3
Same code broken in 1.13.4
EDIT: Link to GitHub issue
EDIT2: It seems that some behavior has changed in Ember (possibly another bug?) between 1.12.0 and 1.13.0. For some reason the actions are no longer being caught in the item controller and instead are being sent directly to the route controller. I'm not 100% sure why that is, but as a fix you can either downgrade to Ember 1.12 or move your editTodo action to your todos controller instead.
EDIT3: Link to second Github issue
EDIT4: As suggested in the second bug ticket, you can also change the target of the action:
<label {{action "editTodo" on="doubleClick" target="todo"}}>{{todo.title}}</label>
I am building an app using Ember.js with an OAuth system. I have this button for my users to login: http://imgur.com/C8x70ZX
After my user logged in, it changes to this dropdown:
http://imgur.com/cGTsMzA
The problem is, this currently only works after a page reload. Since I am building a single page, dynamic application, this is something I do not want.
This is the implementation I use:
{{#if isNotLoggedIn}}
<li class="has-form" id="logInButton"><button onclick='FBLogin()'>Connect with Facebook</button></li>
{{else}}
<li class='has-dropdown not-click'>
<a href='#'><img class='profilePicture' {{bind-attr src=pictureLinkSquare}} height='25px' width='25px' /> Welcome, {{firstName}} {{lastName}}!</a>
<ul class='dropdown'>
<li>{{#link-to 'profile'}}Profile{{/link-to}}</li>
<li>Sign Out</li>
</ul>
</li>
{{/if}}
So, how would I go about changing that button dynamically, what do I use for that? Can I implement this using ember (I was looking at the {{action}} helper?) or is it better to use something like jQuery to accomplish this task?
This is my first small, single page project, so I feel a bit lost.
Creating a JSBin example would help understand your query better.
However from what I understand, you would have not marked 'isNotLoggedIn' as a computed property that probably would be watching some property in your controller that controls the state of login.
Look at the example #http://emberjs.com/guides/object-model/computed-properties/
In example, pay special attention to how fullName computed property ended by putting a watch on base properties '.property('firstName', 'lastName')'. Usually when this is missed, the computed property does not get 'refreshed' immediately.
Hope this helps!
I'm using jQuery templates to build a tree. It works very well so far, but I came across an issue when trying to determine if an item is at the root level or not.
I use a template similar to that of render tree items:
<script id="tree-row-tmpl" type="text/x-jquery-tmpl">
<li>
<div class="row ${NodeType}">
${Name}
</div>
{{if expanded}}
<ul>
{{tmpl($data.chidren || []) "#tree-row-tmpl"}}
</ul>
{{/if}}
</li>
</script>
Now in the link click handler I try to determine root node using:
if($.tmplItem(this).parent)
It turned out the root tmplItem.parent is not null (as I expected), but contains an object with two properties: {data:{}, key:0}.
I see that I can check item.parent.parent or one of the properties which exist in regular tmplItem and missing in the root object. But this seems like a kind of hack for me - I'd prefer finding an "official" way of verifying a tmplItem whether it's empty or valid.