Morrrrre Live Examples

[yyx990803]

JSFiddle links / PRs welcome.

[filipelinhares]

@yyx990803 jsfiddle, Did I do it right or does it have another way to do?

[yyx990803]

Cool! two little things:

1. You should always clean up after yourself in unbind(), e.g. remove event listeners and remove the popup element. You can attach things to this so you can get a reference to them in unbind().
2. I've just introduced the isLiteral option for custom directives in dev branch. For directives like this that only needs the literal value from the attribute, this option would give you this.value which is the attribute value, and avoid the extra work of trying to parse the value as an expression.

I think this is pretty cool though, might include it on the site once it's polished up the next version is released.

[filipelinhares]

@yyx990803 , i didn't understand exactly how unbind() works. would be like this? jsfiddle

[yyx990803]

unbind() only gets called when the directive's owner ViewModel is $destroyed. I've made a fork of your fiddle: http://jsfiddle.net/yyx990803/C7ZL5/

[filipelinhares]

Hi @yyx990803, look this jsfiddle.

[yyx990803]

👍

[lfac-pt]

Very cool! But wouldn't it make more sense to have that as a custom component? I tried to do that in http://jsfiddle.net/lfac_pt/wUNkL/1/ but I do not understand why demo-2 does not work and why inlining the component doesn't even render :|

[unsafecode]

What about async loading for components? I would like them to be different viewmodels and to get rid of the need of registering them a priori

[yyx990803]

@lfac-pt you cannot use v-with like that in demo2 because Vue will attempt to find properties with the key yyx990803 and vue and try to bind them. Inlining data could be as simple as adding a few data- attributes and retrieve them in the component's created hook.

Also it could be lighter weight to use a directive instead of a component in this case, because there's no interaction logic or data binding needed for the github button.

[yyx990803]

@unsafecode could you sketch out how you imagine the API would be like?

[unsafecode]

https://github.com/rniemeyer/knockout-amd-helpers

In this case, you do not declare custom elements upon initialization, but every time a module binding is found, the corresponding script and template are loaded through requirejs, a databinding occurs and the result is rendered.

The side aspect is you actually work with different viewmodels, each coming from the different components, isolated from one another. Moreover, I can pass a set of options to each one as configuration.

[yyx990803]

@unsafecode this looks interesting. I probably won't introduce this into core but it could definitely live as a plugin.

[unsafecode]

I'll try to stub the plugin :)

Yet still, I was wondering if there's a way to use custom elements directly, and them map them to the corresponding module (async)

Inviata dal mio Windows Phone

---

Da: Evan Youmailto:notifications@github.com
Inviato: ‎11/‎02/‎2014 16.13
A: vuejs/vuejs.orgmailto:vuejs.org@noreply.github.com
Cc: unsafecodemailto:r.chiodaroli@live.com
Oggetto: Re: [vuejs.org] Morrrrre Live Examples (#1)

@unsafecode this looks interesting. I probably won't introduce this into core but it could definitely live as a plugin.

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[yyx990803]

@unsafecode For the whole asynchronous-ness of the import to work properly, some changes to core might be needed, I'm not sure yet. For further discussion regarding this plugin you can open an issue here: https://github.com/vuejs/vue-import

Thanks for the interest!