Comments (9)
https://github.com/hybridsjs/hybrids/blob/main/src/store.js#L1528
The draft model when used without an id falls back to the undefined
id - so, indeed, if you have multiple components using a draft mode of the same original model, and not set id, they will all have the same "draft" instance. That behavior is very rare to have multiple "create" forms of the same model at once on the screen. Otherwise, the store would have to create id on the fly - but how it could then say, that it is not the normal id of the original model - so it would be very complicated to make it work like this.
I think what you can do, is to add the id
setting to your draftComment
- so then if it is "edit" mode - the component has set commentId
property.
{
commentId: '',
draftComment: store(Comment, { draft: true, id: 'commentId' }),
comment: store(Comment, { id: 'commentId' }),
}
I'll try to make a working example tomorrow.
from hybrids.
Good to know that you have temporary solution. I'll try to rethink it as soon as possible, and back with more general way to handle that case.
from hybrids.
I tried to solve the problem through a single model descriptor that does not have an Id and is always in Draft mode. It didn't work out either. All components without a defined model receive the same model after the first model is created in one of the components:
https://codepen.io/qsppl/pen/NWoLMYR?editors=1011
from hybrids.
This is the case from the editable table
from hybrids.
I've started building an example, and I think I finally understand your case. If I am correct, you have some sort of rows, and you can add a comment to each, but it is a "create" form - and in your case, a user can open multiple forms at once.
Unfortunately, the current implementation of the draft model fails in that case, as I wrote earlier, you can't have multiple instances of the draft without passing id.
I'll try to rethink what can be done for you. In the meantime, I hope that you have some workaround of the issue, and it does not block you.
EDIT: The easiest workaround could be to not use draft when adding a comment, just use store.set()
directly with new data when the form is submitted. I know that then you miss validation from the store (if you use it).
from hybrids.
I solved the problem. I'm showing only one on-demand creation form.
But it is very inconvenient to control the components so that only one form is open at a time.
I also had to create two components:
contact-comment-remind.component.ts
contact-comment-remind-create.component.ts
Instead of one:
contact-comment-remind.component.ts
Duplicate html and css markup. This becomes a problem when there are more than 10 models in the table. Each model requires two identical components instead of one.
But this solution supports Store validation.
from hybrids.
After all, I figured out, that the store can create a local temporary ID for the draft model, as it is very unlikely that it might hit an existing ID of the storage (for UUID v4 the collision is negligible).
If it is possible, please test it out before merging and release, using codesandbox build:
"dependencies": {
"hybrids": "https://pkg.csb.dev/hybridsjs/hybrids/commit/e530588f/hybrids"
},
You can use it directly in your code or using codesandbox (link in the PR mentioned above).
from hybrids.
Please try v8.2.7
where you can safely use multiple instances of the component that uses store draft without id. It should work now as you expected.
from hybrids.
Please try
v8.2.7
where you can safely use multiple instances of the component that uses store draft without id. It should work now as you expected.
Thank you very much, I didn’t expect you to add this functionality so quickly. I'll try to use this in the next similar case. The task that I solved was already in production.
from hybrids.
Related Issues (20)
- Bug: Template is not updated when component properties change HOT 14
- How to add focus when opening a form? HOT 4
- I can't write a polymorphic model definition for GeoJson objects HOT 7
- Content is not updated when creating a model HOT 2
- Using "store([Model])" causes a TypeScript error HOT 18
- Clearing a draft causes a TypeScript error. HOT 7
- "children" fabric causes TypeScript error HOT 4
- using 'host.render()' and 'host.content()' causes a TypeScript error HOT 4
- The "store(Model, { id: value })" descriptor does not resolve "id" correctly to the model instance. HOT 3
- The "store(Model, { id:value })" descriptor does not work correctly. HOT 2
- Add a helper for assigning component properties HOT 3
- Dynamic columns not showing when render a html table HOT 4
- '"hybrids"' has no exported member named 'property'. Did you mean 'Property'? HOT 8
- Add support for "TypeScript v5" HOT 3
- I can't create an arbitrary number of nested forms: HOT 6
- Small Type Inferencing Issue with Property<E, V> HOT 3
- Cannot pass an object to the API via the "list" method HOT 7
- version 8.2.17 backwards compatibility is broken! HOT 9
- Expand the functionality of drafts
- sync() with nested models is broken HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hybrids.