Comments (6)
When saving a nested model, an error occurs:
TypeError: Provided model instance is not a draft
example: https://stackblitz.com/edit/hybrids-simple-counter-ukwwus?file=src%2Findex.js
from hybrids.
We accomplished this task by creating a PersonDraft
model, but it looks bad. I'll try to write my own implementation of store.draft()
from hybrids.
You can ;) The below example uses two models, each has its own component for the form. You don't have to submit Person
drafts, just when the whole form is submitted create them or pass them to one end-point with the project model. Drafts when disconnected from DOM will be cleared.
My mistake, as those are also drafts, then they must be submitted, to be visible for the main model.
https://stackblitz.com/edit/hybrids-simple-counter-vqdzk3?file=src%2Findex.js
EDIT: Models are external to each other (then they get/set independently) or you can create a nested structure of contacts inside of the main model by not passing id: true
to the model: contacts: [{ content: ''}]
- But i think in your example the first case is valid.
from hybrids.
Thanks a lot, it works.
from hybrids.
However, I cannot use store.set(Definition, draft)
instead of store.submit(draft)
because this approach causes problems when updating the model.
from hybrids.
If the model references another model, the draft of that model still references the second one (not its draft).
The draft mode is nothing more like making a copy of the original and making it memory accessible (if the instance is not there). The reference does not create another deep draft. This is a core issue here.
From the store perspective, Project and Person models are separate. It means, that if you want to reference a Person in a Project, you must "save" it first. I know, that what you would like to do, is to "create" it together - project and all of the persons (I assume that your API allows you to do so).
However, it would be more complicated if you edit the existing Project, as it references Persons, which when set will update accordingly. If this is your requirement, you should create a "special" model for this form - this is not that bad - you can spread fields from both original models, create nested persons, and after saving it, clear original models if needed (just not spread the [store.connect]
- so both models will be memory-based copies). Then if you need to edit the model you can get the original model with included persons.
To sum up, the store is flexible and it does not always reflect the API data - it should rather reflect the structure needed in the view. In short, my suggestion is just to make a custom "draft" mode - there is not that much magic behind the feature.
from hybrids.
Related Issues (20)
- 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
- Small Type Inferencing Issue with Property<E, V> HOT 4
- 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 4
- Allow storing an object in a component property HOT 4
- Add partial loading of model data HOT 3
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.