Code Monkey home page Code Monkey logo

Comments (6)

smalluban avatar smalluban commented on May 28, 2024

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.

Qsppl avatar Qsppl commented on May 28, 2024

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.

Qsppl avatar Qsppl commented on May 28, 2024

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.

image

from hybrids.

Qsppl avatar Qsppl commented on May 28, 2024

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.

smalluban avatar smalluban commented on May 28, 2024

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.

Qsppl avatar Qsppl commented on May 28, 2024

Thanks, I'll do it like this

from hybrids.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.