New to ember and this is super dumb but I've wasted my day on it.
I'm creating an array of objects in my controller which i'm using to building radio buttons in my view.
when the button is clicked, i want to toggle the clicked attribute on the radio input so that it will appear clicked. Very simple but Ember keeps throwing me errors.
here's my code (edited some typos):
IndexController = Ember.ObjectController.extend({
radioArray : function () {
var a = [], i = 0;
while (a.push({ index: i++, clicked: false }), i <= 10);
return a;
}.property('radioArray'),
actions : {
assignClick : function (item, index) {
this.toggleProperty(item.clicked);
// some unrelated business logic here
}
}
});
this hooks up to:
{{#each radioArray}}
<label {{action "assignClick" this index}}>
<input type="radio" {{bind-attr value=index checked=clicked}} /> foo
</label>
{{/each}}
All i want is to show that the correct radio button has been clicked. But when i try and set clicked to true in my ctrl, i get "Uncaught Error: Assertion Failed: Cannot call get with false key."
If you're trying to use Em.Object.toggleProperty, then you need Em.Object. :)
There are functions like Em.get and Em.set, which you can use for ember and non-ember objects, but there is no function Em.toggleProperty for a non-ember objects.
However, you can use Em.set with Em.get to implement toggle behavior:
Em.set(item, 'clicked', !Em.get(item, 'clicked'));
P.S. Setting property dependence from property itself doesn't make sense. (I'm talking about radioArray : function () {...}.property('radioArray')).
P.P.S. Working example: http://emberjs.jsbin.com/memuwi/2/edit?html,js,output
Related
I'm writing a function to update a custom checkbox when clicked (and I don't want to use native checkbox for some reasons).
The code for checkbox is
<div class="tick-box" :class="{ tick: isTicked }" #click="() => isTicked = !isTicked"></div>
which works find.
However, there are so many checkboxes, so I use object to keep track for each item. It looks like this
<!-- (inside v-for) -->
<div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" #click="() => {
isTicked['lyr'+layer.lyr_id] = !isTicked['lyr'+layer.lyr_id]
}"></div>
Now nothing happens, no error at all.
When I want to see isTicked value with {{ isTicked }}, it's just shows {}.
This is what I define in the <script></script> part.
export default {
data() {
return {
isTicked: {},
...
};
},
...
}
Could you help me where I get it wrong?
Thanks!
Edit:
I know that declaring as isTicked: {}, the first few clicks won't do anything because its proerty is undefined. However, it should be defined by the first/second click not something like this.
Objects does not reflect the changes when updated like this.
You should use $set to set object properties in order to make them reactive.
Try as below
<div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" #click="onChecked"></div>
Add below method:
onChecked() {
this.$set(this.isTicked,'lyr'+this.layer.lyr_id, !this.isTicked['lyr'+this.layer.lyr_id])
}
VueJS watches data by reference so to update object in state you need create new one.
onChecked(lyr_id) {
const key = 'lyr'+lyr_id;
this.isTicked = {...this.isTicked, [key]: !this.isTicked[key]};
}
I have (n) check boxes and a button in my angular2 view . When I click on one of them a function is called. When I click on the button every checkbox must be unchecked. How to do it?? (n) may vary dynamically.
enter image description here
I will give you an example from a table, since I have no idea what your code actually looks like, but it should work for what you need.
You need some object defined for all of your checkboxes. They likely all have certain properties in common, like labels. Here is an example of such an object:
myData = {
content: [
{
some_string: '',
some_number: 0,
type: '',
selected: false
}
]
};
With this object you can create checkbox instances and push each one to an array, which will hold all of your checkbox objects.
Create your checkboxes in your html in a loop using the objects you have defined above. In your html have your checkboxes call a function. In the case below the checkToggle() function is called.
<input id='{{row.id}}' class='bx--checkbox bx--checkbox--svg'
type='checkbox' name='checkbox' (change)="checkToggle($event,
row.id)" [checked]="row.selected">
checkToggle() has been defined as follows:
//select or deselect this check box
checkToggle(event, nodeId) {
const id = this.findNode(nodeId);
this.myData.content[id].selected = !this.myData[id].selected;
}
Your button should end up calling a function to check all of the boxes
<button (click)="checkToggleAll($event)">Your Button Title</button>
Finally, have your checkToggleAll() function go through the entire array of checkboxes and set them. Here is an example:
//select or deselect all the check boxes
checkToggleAll(event) {
for (let i = 0; i < this.myData.content.length; i++) {
if (this.controls[this.myData.content[i].type]) {
this.myData.content[i].selected = event.target.checked;
}
}
}
This is not something you can plug into your code but it should give you some idea of how to accomplish what you're after.
I have an input that actively edits the name of a model.
The problem is that the input accepts the changes if I begin to type into the input.
So writing a categoryName (an attribute of recordCategory) with a value of "Something Else" would be a giant chore because I would need to refocus on the edit-recordCategory input after every letter I type. So if i would be focused on the input and I would quickly type "Some", it would accept the 'S' before unfocusing me out of the input and resorting the recordCategory in the list based on it's current value, which would only be "S".
Here's a more detailed example of my code.
{{#each searchResults itemController="recordCategory"}}
<div id="hoveredRow" {{bind-attr class="isEditing:editing"}}>
{{#if isEditing}}
<div class="input-standard">
{{edit-recordCategory value=categoryName focus-out="acceptChanges"
insert-newline="acceptChanges"}}
</div>
{{else}}
{{categoryName}}
{{/if}}
</div>
{{/each}}
This is my controller
isEditing: false,
actions: {
editrecordCategory: function(recordCategory){
this.set('isEditing', true);
console.log(this.get('isEditing is toggling'))
},
acceptChanges: function() {
this.set('isEditing', false);
if (Ember.isEmpty(this.get('model.categoryName'))) {
this.send('removerecordCategory');
} else {
this.get('model').save();
}
console.log(this.get('isEditing'))
},
}
and then the view that defines edit-recordCategory
VpcYeoman.EditRecordCategoryView = Ember.TextField.extend({
didInsertElement: function() {
this.$().focus();
}
});
Ember.Handlebars.helper('edit-recordCategory', VpcYeoman.EditRecordCategoryView);
EDIT:
After implementing GJK's version of the 'acceptChanges' action. I was receiving the same problem.
TEST 1
I commented out the acceptChanges action and both of it's references in {{edit-recordCategory value=categoryName focus-out="acceptChanges" insert-newline="acceptChanges"}} making it just {{edit-recordCategory value=categoryName}}. The same problem is still happening. This leads me to believe that the problem is not in the way acceptChanges was written.
There was a point where my original 'acceptChanges' action and its use in
{{edit-recordCategory value=categoryName focus-out="acceptChanges"
insert-newline="acceptChanges"}}
worked perfectly.
TEST 2
On top of taking out any reference of 'acceptChanges', i removed the {{#if Editing}} conditional. The
{{edit-recordCategory value=categoryName focus-out="acceptChanges"
insert-newline="acceptChanges"}}
did not disappear upon typing (as expected with there being no ember conditional, but the {{edit-recordCategory}} still auto submits when I type. It should also be noted that this list of recordCategories sorts itself, so upon accepting the edit, i'm focused out of {{edit-recordCategory}} and the object resorts itself based on it's new categoryName value
Problem Found! But it breaks my filter bar.
Once i commented out this function
searchResults: function() {
var searchTerm = this.get('searchTerm');
var regExp = new RegExp(searchTerm,'i');
// We use `this.filter` because the contents of `this` is an array of objects
var filteredResults = this.filter(function(category) {
return regExp.test(category.get('categoryName'));
});
return filteredResults;
}.property('#each.categoryName', 'searchTerm'),
and took 'searchResults' out of {{#each searchResults itemController="recordCategory"}} to editing worked smoothly, but now my search bar filter is not working.
Your categoryName property is on your model, which means you can override it in your controller. You'll want to use a temporary property on your controller to solve your issue.
recordCategory: '',
actions: {
acceptChanges: function() {
var recordCategory = this.get('recordCategory');
this.set('model.recordCategory', recordCategory);
}
}
I'm trying to implement a form where I can delete specific inputs using React. The problem is, react doesn't seem to be rendering the information correctly. This is my render function:
render: function(){
var inputItems;
if (this.state.inputs){
inputItems = this.state.inputs.map(function(input){
console.log(input)
return (
<Input
input={input}
onDestroy={this.destroy.bind(this, input)}
onEdit={this.edit.bind(this, input)}
editing={this.state.editing === input.id}
onCancel={this.cancel} />
);
}, this);
}
(...)
// this isn't the actual render return
return {inputItems}
and my destroy function:
destroy: function (input) {
var newInputs = this.state.inputs.filter(function (candidate) {
return candidate.id !== input.id;
});
this.setState({
inputs: newInputs
});
},
The actual destroy function is getting called through a child component via <a href="#" onClick={this.props.onDestroy}>(Remove)</a>. The interesting thing is that when I console log my inputs, as seen in the render function, the correct inputs are shown - the one I called the destroy function on is gone. But the incorrect inputs are rendered - it's always the very last one that disappears, not the one I called the destroy function on. So for example, I'll initially log:
First Name
Last Name
Email
and call the destroy function on the Last Name. The console.log will show:
First Name
Email
but the actual rendered information will show:
First Name
Last Name
Thanks!
Figured it out. Has to do with React child reconciliation. Added a key={input.id} to the <Input> tag and it works.
More information here under child reconciliation and dynamic children.
http://facebook.github.io/react/docs/multiple-components.html
I am quite new with Meteor but have really been enjoying it and this is my first reactive app that I am building.
I would like to know a way that I can remove the .main element when the user clicks or maybe a better way would be to remove the existing template (with main content) and then replace with another meteor template? Something like this would be simple and straightforward in html/js app (user clicks-> remove el from dom) but here it is not all that clear.
I am just looking to learn and for some insight on best practice.
//gallery.html
<template name="gallery">
<div class="main">First run info.... Only on first visit should user see this info.</div>
<div id="gallery">
<img src="{{selectedPhoto.url}}">
</div>
</template>
//gallery.js
firstRun = true;
Template.gallery.events({
'click .main' : function(){
$(".main").fadeOut();
firstRun = false;
}
})
if (Meteor.isClient) {
function showSelectedPhoto(photo){
var container = $('#gallery');
container.fadeOut(1000, function(){
Session.set('selectedPhoto', photo);
Template.gallery.rendered = function(){
var $gallery = $(this.lastNode);
if(!firstRun){
$(".main").css({display:"none"});
console.log("not");
}
setTimeout(function(){
$gallery.fadeIn(1000);
}, 1000)
}
});
}
Deps.autorun(function(){
selectedPhoto = Photos.findOne({active : true});
showSelectedPhoto(selectedPhoto);
});
Meteor.setInterval(function(){
selectedPhoto = Session.get('selectedPhoto');
//some selections happen here for getting photos.
Photos.update({_id: selectedPhoto._id}, { $set: { active: false } });
Photos.update({_id: newPhoto._id}, { $set: { active: true } });
}, 10000 );
}
If you want to hide or show an element conditionaly you should use the reactive behavior of Meteor: Add a condition to your template:
<template name="gallery">
{{#if isFirstRun}}
<div class="main">First run info.... Only on first visit should user see this info.</div>
{{/if}}
<div id="gallery">
<img src="{{selectedPhoto.url}}">
</div>
</template>
then add a helper to your template:
Template.gallery.isFirstRun = function(){
// because the Session variable will most probably be undefined the first time
return !Session.get("hasRun");
}
and change the action on click:
Template.gallery.events({
'click .main' : function(){
$(".main").fadeOut();
Session.set("hasRun", true);
}
})
you still get to fade out the element but then instead of hiding it or removing it and having it come back on the next render you ensure that it will never come back.
the render is triggered by changing the Sessionvariable, which is reactive.
I think using conditional templates is a better approach,
{{#if firstRun }}
<div class="main">First run info.... Only on first visit should user see this info.</div>
{{else}}
gallery ...
{{/if}}
You'll have to make firstRun a session variable, so that it'll trigger DOM updates.
Meteor is reactive. You don't need to write the logic for redrawing the DOM when the data changes. Just write the code that when X button is clicked, Y is removed from the database. That's it; you don't need to trouble yourself with any interface/DOM changes or template removal/redrawing or any of that. Whenever the data that underpins a template changes, Meteor automatically rerenders the template with the updated data. This is Meteor’s core feature.