Comments (8)
This looks great!
from meteor-blaze-components.
I just have my own blaze components-based modal.
from meteor-blaze-components.
Can you share some code? How do you render and destroy it in the dom?
from meteor-blaze-components.
Hm, I do not have an example handy. But I have an top-level modal directly under <body>
. And then I have a singleton component rendered there. And then I simply access that singleton component and call methods on it to change state, for example, change visibility state and so on.
from meteor-blaze-components.
OH yeah I see.. how do you then dynamically pass and render a BlazeComponent-Instance with a given datacontext??
from meteor-blaze-components.
I do not use data context at the top level in that case, but have a reactive var (or reactive field) in onCreated
attached to the component. Something like:
globalModalWrapper = null
class ModalWrapper extends BlazeComponents
@register 'ModalWrapper'
onCreated: ->
super
@dataContext = new ReactiveField null
throw new Error "Only one modal wrapper can exist at a time." if globalModalWrapper
globalModalWrapper = @
onCreated: ->
super
globalModalWrapper = null
<template name="ModalWrapper">
<div class="modal-wrapper">
{{#if dataContext}}
{{> ModalContent dataContext}}
{{/if}}
</div>
</template>
globalModalWrapper.dataContext({type: 'warning', message: "Something looks bad."});
from meteor-blaze-components.
Wuhuuuuu - thanks to you @mitar I have gotten close!!!
By the way: I love the idea of having a directory of BlazeComponent-compatible packages. When you take over Blaze for mdg (do you??? 👍 ) we should have that... and a Modal Toolkit should be included...
this is what I have... so far it works
// Variable to access the instance of the modal globally
export let ModalComponentInstance = null
export const UiModalComponent = class UiModalComponent extends BlazeComponent {
onCreated() {
super.onCreated()
this.componentClass = new ReactiveField()
this.dataContext = new ReactiveField()
// Singleton pattern
if (ModalComponentInstance) {
throw new Error('Only one modal can exist at a time')
} else {
ModalComponentInstance = this
}
}
show(component, dataContext) {
this.componentClass(component)
this.dataContext(dataContext)
this.$('#the-modal-singleton').modal('show')
}
hide() {
this.componentClass(null)
this.dataContext(null)
this.$('#the-modal-singleton').modal('hide')
}
renderedComponent() {
if (this.componentClass()) {
return this.componentClass().renderComponent(this.currentComponent())
} else {
return null
}
}
}
UiModalComponent.register('UiModalComponent')
Bootstrap3 compatible template
<template name="UiModalComponent">
<div id="the-modal-singleton" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
{{#with dataContext}}
{{>renderedComponent}}
{{/with}}
</div>
</div>
</div>
</div>
</template>
put this somewhere in your layout.html
{{>UiModalComponent}}
and then finally you can access the modal programtically from anywhere in your code, and tell it what Component to render with what data-context.
import { ModalComponentInstance } from '/imports/modules/components/client/component_modal.js'
// ...
onClickEditOpenModal(event) {
ModalComponentInstance.show(TestComponent, {
// data context
addNumber: _.random(1, 100),
})
}
from meteor-blaze-components.
For anyone else working on this: the cool thing with the above solution is that you can still use "theduke:bootstrap-modal-prompt" for standard-prompts within the UiModalComponent. So you basically have another modal-prompt-layer on top of the modal.
from meteor-blaze-components.
Related Issues (20)
- Example of mixin for two-way binding HOT 3
- TemplateTwoWayBinding HOT 3
- Template2
- [Question] Best way to create a documentation about components HOT 23
- Ideas for new features of Blaze Components HOT 9
- [Question] Migrating to Blaze once the npm version is released. HOT 1
- Write template HTML within component JS? HOT 2
- How to unit-test a component? Guidance needed HOT 5
- Values is not defined HOT 2
- General Question HOT 1
- Interfacing with react.js HOT 6
- In-line component creation for lack of method params HOT 3
- What projects besides weekan are built with this library HOT 3
- Performance HOT 1
- Template Strings ? HOT 1
- Support coffeescript 2 (in Meteor 1.6.1) HOT 8
- Migrating to react: Rendering of BlazeComponents via React is NOT possible HOT 2
- error updating to Blaze Components 0.23 & Meteor 1.8.2-rc.3 HOT 3
- Meteor 1.8.2: ReferenceError: meteorBabelHelpers is not defined HOT 16
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 meteor-blaze-components.