Comments (6)
It looks like you create not-covered edge cases ;) I made a fix, so just update to v8.2.8
and your case should work.
However, when using the draft mode, I recommend to not use the id
setting. When the id
is omitted, the model property itself can be set with a model instance or just an id. In your case you share the form with the presentation, which I also recommend to split. So then you have clean model form, which takes a model id, or not if it is a "create" mode:
{
tag: 'a-comment-form',
comment: store(Comment, { draft: true }),
...
};
Body of a comment component:
<div>${comment.body}</div>
${editMode && html`<a-comment-form comment="${comment}"></a-comment-form>`}
And create form in another place (without setting the comment):
<p>Create comment</p>
<a-comment-form></a-comment-form>
from hybrids.
Thank you. As for dividing the interface into presentation of models and forms for filling models with data, I wouldn’t want to do this. This reduces the accessibility of actions (in the case of separate edit pages or modal windows), or leads to duplication of markup and logic for "component" and "component-form" (in the case when for editing we replace the component with a form in the same place)
from hybrids.
Example (changed*): https://codepen.io/qsppl/pen/WNPPdym?editors=1011
Clearing drafts no longer works.
It got id "2" and after that I can't set the component property to another draft.
from hybrids.
If creation/editing and presentation really need to be separated into different components, then I’ll work like this. I don't understand very well how hybrids works and maybe I'm trying to do something impossible using one component to create/edit/present a model.
from hybrids.
The problem is only with using the id
setting. It then creates (and should) read-only property, so setting draft to null
can't work - the property must always take the id from the property set by the id
option.
You can change the draft instance by reassigning property, which is used for the id. However, it's impossible to clear draft with id pointing to undefined
. You can't have cookie and eat cookie...
So.. I think using id option with draft should not be supported, as it creates that impossible cases. If you omit the id, and set the draft by its own property, everything will work.
Because of the above arguments, I recommend splitting the form from the comment component. But still you can use it inside of the comment, and also use it outside of that context.
Generally, I don't see it as redundant code, rather the opposite - splitting the logic into separate components is usually better.
from hybrids.
Thanks, I'll do it like this
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.