New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How should passing objects to normal elements be handled? #502

Open
justinbmeyer opened this Issue Nov 8, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@justinbmeyer
Copy link
Contributor

justinbmeyer commented Nov 8, 2018

If a key:from="value" binding exists and value is an object, I think it should set the key property on the element.

For example, I think record should be available on the <div>:

import {stache} from "//unpkg.com/can@5/core.mjs";

const view = stache(`
  <div id="theDiv"
      record:from="this.record">
      This is a div
  </div>
`);

const fragment = view({
  record: {name: "I am some data"}
});

document.body.appendChild(fragment);

var theDiv = document.getElementById("theDiv");

console.log(theDiv.record)

https://codepen.io/justinbmeyer/pen/MzyXjG?editors=0011

I think this will help with custom elements. We can pass values directly to them.

This can deprecate domData. Also, it currently sets the record attribute to "[object Object]", so I don't think this will be a breaking change.

@chasenlehara

This comment has been minimized.

Copy link
Member

chasenlehara commented Nov 8, 2018

Setting a property sounds right to me, but I’m not 100% sure.

Here’s an issue I filed about setting properties on custom elements: canjs/can-stache#278

@justinbmeyer

This comment has been minimized.

Copy link
Contributor

justinbmeyer commented Nov 8, 2018

Also, another thing to consider, if folks want to set attributes, they can use prop="{{value}}".

Here's what I think the rules should be:

  • prop:from="key" - If on an element that does not have a viewModel, this should set a property.
  • prop="{{value}}" - setAttribute

I like this because prop="{{value}}" makes it clear that value will be converted to a string.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment