I used Polymer 1 (latest version) plus polymerfire (latest version) to show a list with an index (the seedPosition property in my code below). In Polymer 1, the index was incremented by one when I added one object to Firebase, but when I updated everything to Polymer 2.0-preview, the index was increased by the whole list length. That suggests that the whole object gets updated and not the newly added.
The only change I made is loading all elements as #2.0-preview via bower, and changed the class syntax to Polymer 2 (e.g., class ClassName extends Polymer.Element {...}.
<!-- load the firebase array -->
<firebase-query app-name="firebaselogin" path="/exerciseLog" data="{{exerciseLogData}}"></firebase-query>
<template is="dom-repeat" items="{{exerciseLogData}}">
[[tutorValues()]]
</template>
Polymer({
properties: {
seedPosition: {
type: Number,
value: -1
}
}
observers: [
"seedPositionChanged(seedPosition)"
],
tutorValues: function(){
this.set("seedPosition", this.get("seedPosition") + 1);
}
seedPositionChanged: function (seedPosition) {
// Here the seed value gets called exaclty once when adding ONE element to the {{exerciseLogData}} data
}
});
Short answer to your question is yes. You should have a look at this for more details on list of changes that were introduced.
Try [[tutorValues(item)]]. Empty function calls are only called once.
Also since you are observing a primitive value, the observer should be called when setting it directly, e.g. this.seedPosition = this.seedPosition + 1;
Related
In my use case I have an array of characters, each character has multiple builds, and each build has a weapons string, and artifacts string. I'm making a tool to select portions of each string and assign them to a value, e.g. assigning index 3-49 of weapons to a specific weapon.
const [characterIndices, setCharacterIndices] = useState<
{ builds: { weaponIndices: SE[]; artifactSetIndices: SE[] }[] }[]
>([
...characters.map((char) => {
return {
builds: [
...char.builds.map((_build) => {
return {
weaponIndices: [],
artifactSetIndices: [],
};
}),
],
};
}),
]);
The SE type is as follows:
type SE = { start: number; end: number; code: string };
//start and end are the respective start and end of selected text
//code is the specific artifact or weapon
The weaponIndices and artifactSetIndices basically hold the start and end of selected text in a readonly textarea.
I have a function to add a SE to either weaponIndices or artifactSetIndices:
const addSE = (
type: "weaponIndices" | "artifactSetIndices",
{ start, end, code }: SE,
characterIndex: number,
buildIndex: number
) => {
let chars = characterIndices;
chars[characterIndex].builds[buildIndex][type].push({ start, end, code });
setCharacterIndices((_prev) => chars);
console.log(characterIndices[characterIndex].builds[buildIndex][type]);
};
I think that using a console log after using a set function isn't recommended, but it does show what it's intended to the weaponIndices, or artifactSetIndices after an entry is added.
Passing the addSE function alongside characterIndices to a separate component, and using addSE, does print the respective indices after adding an entry, but the component's rendering isn't updated.
It only shows up when I "soft reload" the page, when updating the files during the create-react-app live reload via npm run start.
In case you are confused about what the data types are, I've made a github repo, at https://github.com/ChrisMGeo/ght-indexer/tree/main/src at src/data.json. That JSON file describes what the character data looks like, including the builds, and each build's weapons and artifacts(called artifact_sets in the JSON)
Looks to me you are not updating the state at all.
Here you are just storing the same object reference that you already have in state into a new variable chars.
let chars = characterIndices;
chars now holds reference to a same object as characterIndices.
Here you are mutating that same object
chars[characterIndex].builds[buildIndex][type].push({ start, end, code });
And here you are updating the state to the same object that is already in the state. Notice that no state update here occurs.
setCharacterIndices((_prev) => chars);
Object you have in state is mutated, but you did not "change" the value of the state, thus no component re-render.
What you could maybe do is create a copy of the object, mutate that and update the state. just change chars assignment like this:
let chars = {...characterIndices};
React often compares values using Object.is() only to a single level of nesting (the tested object and its children).
It will not re-render if the parent is found equal, or if all the children are found equal.
React then considers that nothing has changed.
In your implementation, even the first top-level check will immediately fail, since Object.is(before, after) will return true.
You could use an Immutable objects approach to eliminate this concern when setting a new state (either directly through spreading values or with a support library such as Immer).
For example instead of setting the values within the object...
myObj.key = newChildObj
...you would make a new object, which preserves many of the previous values.
myObj === {...myObj, key: newChildObj}
This means that every changed object tree is actually a different object (with only the bits that haven't changed being preserved).
To read more about this see https://javascript.plainenglish.io/the-effect-of-shallow-equality-in-react-85ae0287960c
I'm adding tag by selecting from list (which is populated using $http request). The tag is added but the text which I have typed that remains there with ng-invalid-tag class.
ScreenShots
1) Initially,
2) Typing 3 letters to get HTTP Call.
3) Now after selection of first Skill "Angular Js'.
4) It shows that .input.invalid-tag is enabled. And which doesn't clear the placeholder.
My Input Tag is as below.
<tags-input ng-model="employerMyCandidatesCtrl.skillList" placeholder="Skills..."
replace-spaces-with-dashes="false"
add-from-autocomplete-only="true"
display-property="skillName"
on-tag-added="employerMyCandidatesCtrl.addTagToSkillData($tag)"
on-tag-removed="employerMyCandidatesCtrl.removeTagFromSkillData($tag)">
<auto-complete
source="employerMyCandidatesCtrl.loadSkillData($query)"
displayProperty="skillName" debounce-delay="500"
min-length="3">
</auto-complete>
</tags-input>
Controller Code is as below.
vm.skillList = [];
vm.loadSkillData = function(query) {
return EmployerServices.getAllSkillsPromise(query); // $http call.
};
vm.addTagToSkillData = function(tag) {
if (_.findIndex(vm.skillList, tag) < 0) {
vm.skillList.push(tag);
}
};
vm.removeTagFromSkillData = function(tag) {
var ind = _.findIndex(vm.skillList, tag) > -1 ? vm.skillList.splice(ind, 1) : '';
};
Is any configuration mistake I'm doing?
There are 4 attributes for onTagAdding, onTagAdded, onTagRemoving, onTagRemoved so the basic difference between the attributes ending with adding compared to those ending with added is
Adding suffixed tags are expecting a boolean which when true will be added
or removed based on the tag used.
But onTagAdded/Removed already adds the tag, before the function is called hence we can do some additional logic or else strip the ng-model of the added value or add back the removed value(not very easy).
Check the below JSFiddle to see the four attributes in action here
I have made a custom service to supply the data, so the final answer to your question will be to use the appropriate attribute (onTagAdding, onTagAdded, onTagRemoving, onTagRemoved) based on your usecase. From the above code, I think we need not write onTagAdded, onTagRemoved since its done automatically.
I currently have an iron-list within another iron-list. The parent's data comes from a firebase-query element, and the child's data is computed from each parent item. The db structure and code looks a bit like this:
DB: [
category1: [
itemId1: {
price: 10,
title: "title"
}
]
]
<iron-list id="categoryList" items="{{categories}}" multi-selection as="category">
<template>
<div class="category-holder">
<iron-list id="{{category.$key}}" items="{{_removeExtraIndex(category)}}" as="item" selection-enabled multi-selection selected-items="{{selectedItems}}" grid>
<template>
<div class$="{{_computeItemClass(selected)}}">
<p>[[item.title]]</p>
<p>[[item.price]]</p>
</div>
</template>
</iron-list>
</div>
</template>
</iron-list>
After selecting any number of items, the user can tap on a fab to batch edit the price. This is where I'm having issues. I can't figure out how to access the correct child iron-list in order to call list.set...I'm currently trying the following very nasty method:
var categories = this.$.categoryList;
var categoryItems = categories.items;
(this.selectedItems).forEach(function(item) {
var index = item.itemId;
categoryItems.forEach(function(itemList, categoryIndex) {
if (itemList[index]) {
categories.set('item.' + categoryIndex + '.price', 10);
}
}, this);
}, this);
I'm iterating over the selected items in order to extract the item index and then iterating over the parent iron-list data (categoryItems) in order to check if the given item exists in that subset of data. If so, then I use the category index and attempt to call set on the parent iron-list using the given path to access the actual item I want to edit. As expected, this fails. Hopefully I've made myself clear enough, any help would be appreciated!
EDIT #1:
After much experimenting, I finally figured out how to correctly mutate the child iron-list:
(this.selectedItems).forEach(function(item) {
var list = this.$.categoryList.querySelector('#' + item.category);
var index = list.items.indexOf(item);
list.set(["items", index, "price"], 30);
}, this);
A couple of things worth noting. I'm using querySelector instead of the recommended this.$$(selector) because I keep running into a "function DNE" error. But now I have another problem...after calling the function, the value gets updated correctly but I get the following error:
Uncaught TypeError: inst.dispatchEvent is not a function
Here's a picture of the full error message:
I see the light, hopefully someone can help me out!
OK, I'll take a shot at this. I think the following happens, and I guess this based on how dom-repeat works:
var categories = this.$.categoryList;
var categoryItems = categories.items;
You take the variable that the iron-list is based on, but setting one array to another just creates a reference in javascript. As soon as you update categoryItems, you also update this.$.categoryList.items. When you later sets the new value, iron-list will do a dirty check and compare all subproperties, and because they are equal (because ... reference), the iron-list wont update the dom.
What you should do is to make sure it's a totally new copy and the way of doing that is to use JSON.parse(JSON.stringify(myArray)).
Further on, one major flaw I see in your code is that you're using querySelector to select an element, and then manipulate that. What you should do is to use this.categories and only that variable.
So your method should look something like:
// Get a freshly new array to manipulate
var category = JSON.parse(JSON.stringify(this.categories);
// Loop through it
category.forEach(category) {
// update your categoryList variable
}
// Update the iron list by notifying Polymer that categories has changed.
this.set('categories', category);
I've been doing some searching and there seem to be a few possible solutions.
First one that will probably work: Filtering an array in angular2
but I find using a pipe and a for loop not ideal.
My idea was using an interface.
This would be a typescript solution. Problem here is defining the collection.
public covers = COVERS;
public images = VECTORS; // a BIG image collection
imagesByCoverType: CoverVector = {}; // Array is made if
// I use Vector[]; but I wanted to use interface.
// images are correctly filtered to the relevant ones.
ngOnInit() {
this.imagesByCoverType = this.images.filter(
image => image.type === 'book-cover');
}
// defined outside of the component class of course.
interface CoverVector {
[book_id: number]: Vector;
}
<li *ngFor="let cover of covers")>
<p>{{cover.title}}</p>
<!-- Here I would like to print out a url to an image of an image object -->
<!-- cover has a property book_id, and also a
chapter_id because the book is subdivided -->
<!-- I was thinking something like this: -->
<p>{{imagesByCoverType[cover.id].url}}</p>
</li>
So I want to access an object in an array by using an interface. How do I do this? Considering also that I have a filtered array of vectors that it should go over.
Recap for clarity:
I want:
A big collection of data that has a unique identifier connected to an 'interface' or find method.
This interface should make it possible to input this unique id and access with it the desired object.
Then all properties of this object should be accessible. Or actually only the url in this case. Point being: it should be there, not just the interface property, but any desired object property.
Then all this elegantly wrapped up in a Angular 2 ngIf statement.
I wouldn't have thought this in-array-find-by-object-property thing would be so hard but it's been a struggle.
Solution I am currently using
It's beyond me why I have to resort to a entire for loop just to access one element I already know the identifier of - from a for loop above it - but I used a for loop using a custom pipe.
// Angular 2
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'cover'
})
export class CoverVectorPipe{
transform(value: any, cover_id: number) {
return value.filter(
(item: any)=> item.aim_id === cover_id);
}
}
Any help solving this using an interface is still welcome.
Also I am wondering if this isn't computationally expensive.
I have List of Maps I am using a <template is="dom-repeat" items="{{items}}" as="row">
which makes sense, and then I have a Polymer paper-button which calls an event. I define the method as:
void edit(CustomEventWrapper cew, Map data){
var mnodel = new DomRepeatModel.fromEvent(cew);
}
but model itself isnt correct, as that returns a DomRepeatModel.
Next I was looking at the method / properties which allow me to determine the map again.
It shows that item is depricated, so i shouldnt be using that but instead use [], so i tried: ['item'] which was null. I checked that .item gave me the map.
in the square brackets [] you need to pass the key of whatever you set it as in the template.
In this case, say:
void edit(CustomEventWrapper cew, Map data){
var model = new DomRepeatModel.fromEvent(cew)["row"];
print("Your model is: $model");
}