These are chat archives for ractivejs/ractive

19th
Dec 2017
Julian Knight
@TotallyInformation
Dec 19 2017 16:25
Argh! Annoyance, I can't make the following work, hoping someone can shed light.
I am trying to add 2 instances of a component to a mountpoint - I though that, as there is an append option, this would work:
const app1 = new Ractive({
    el: '#app1',
    template: `
        <# mountpoint1 />
    `,
    oninit () {
        // Create new instance
        const btnLoader1 = uibuilderBtnLoader()
        const btnLoader2 = uibuilderBtnLoader()

        // Link msg of parent to message of instance
        //myComponent.link('msg', 'message', { ractive: this })

        // It's mount'in time!
        this.attachChild(btnLoader1, { target: 'mountpoint1', 'append':true })
        this.attachChild(btnLoader2, { target: 'mountpoint1', 'append':true })
    },
    data: {
    },
})
Chris Reeves
@evs-chris
Dec 19 2017 16:43
you have to create a second anchor with the same name
Julian Knight
@TotallyInformation
Dec 19 2017 16:44
Yes, I can do that but as I need to be able to dynamically add new items to my UI, isn't there a way to do that?
attachChild has prepend/append and insertAt which seems to imply that you can insert multiple children.
which is totally what I want to do
Chris Reeves
@evs-chris
Dec 19 2017 16:50
for that, you have to get a little bit meta, as an anchor can only hold one child at a time
you can access a list of children attached to an instance with @.children and even a particular anchor with @.children.byName.someName
which lets you do this
Julian Knight
@TotallyInformation
Dec 19 2017 16:53

Sheesh! I'd wondered if something like that would be required though I hoped not. Thanks though. I'll have to see if that scales OK. I'm not really expecting more than a few 10's of component instances on a page.

But if this is the case, what IS the purpose of the prepend/append/insertAt options?

Chris Reeves
@evs-chris
Dec 19 2017 16:55
the anchor will display one instance at a time, so if there's already one instance attached to an anchor, appending one will do nothing - if you then detach the instance that was already there, then the appended one will render into the anchor
kinda like a carousel for instances
Julian Knight
@TotallyInformation
Dec 19 2017 16:56
So you get loads of instances on the mountpoint but only 1 at a time is visible?
Chris Reeves
@evs-chris
Dec 19 2017 16:56
yes, only one at a time per anchor
Julian Knight
@TotallyInformation
Dec 19 2017 16:57
OK, so this is the biggest weakness I've found so far in Ractive. Perhaps somewhat esoteric but I can't imagine I'm the only person to want to be able to dynamically extend a web UI?
Chris Reeves
@evs-chris
Dec 19 2017 16:57
the original implementation had two types of anchors - single and multi-instance, but that was scrapped because 99% of the time you need some other DOM in there around each anchored instance
if you need crazy dynamism, look no further than {{> { template: 'template string here' } }}
I think dynamism is actually ractive's biggest strong point compared to other libs
you can also render a pre-parsed partial directly from data if you need the extra perf with {{> .path.to.tpl }}
Julian Knight
@TotallyInformation
Dec 19 2017 17:00
I'm not disagreeing, that's what attracted me to it. I'm trying to get my head around whether I could do what I want with partials. The main problem seemingly that I think I need the intelligence that comes with a component.
Chris Reeves
@evs-chris
Dec 19 2017 17:02
there's also a half-step between partials and components that is very new and not well documented - the macro partial #3111
what sort of dynamic extension are you trying to achieve?
Julian Knight
@TotallyInformation
Dec 19 2017 17:04
OK, so my UI will be defined in a back-end server using components there that define each FE component. The order the components are seen in the FE will also be defined in the back end.
Chris Reeves
@evs-chris
Dec 19 2017 17:04
like a CMS?
Julian Knight
@TotallyInformation
Dec 19 2017 17:06
I imagined something that would let me build a dynamic object on the front-end where the visual components can be added, removed and moved programatically. Yes, like a CMS. The back end is Node-RED by the way, a flow-based visual programming tool. It already has something like this which uses Angular but that is horribly complex and so very inflexible.
So if you want to chart some data, all you need to do is add a chart ui node to your flow and feed it with data, the chart appears in your web page.
Chris Reeves
@evs-chris
Dec 19 2017 17:07
I've not used node-red, but I have made a cms with ractive
Julian Knight
@TotallyInformation
Dec 19 2017 17:08
Want a switch to represent the state of a setting on an IoT device? add a switch node to Node-RED, feed the state changes from the device and that is reflected in the front end. change the state in the front end and it is send back to the server.
So far, I can create the components and I can manually compose a page with those. I have my own library that takes care of the websocket comms. So the only part missing (apart from the massive amount of work required to build a load of components) is the ability to programmatically compose the front-end.
Chris Reeves
@evs-chris
Dec 19 2017 17:11
so a data-driven template i.e. the data defines the template
Julian Knight
@TotallyInformation
Dec 19 2017 17:12
Yes :)
Chris Reeves
@evs-chris
Dec 19 2017 17:12
is the node structure flat, or can nodes contain nested nodes?
Julian Knight
@TotallyInformation
Dec 19 2017 17:13
I'm afraid that some nesting would be likely - the most likely being a card or grid style that contains other components such as switches, charts, text, etc.
The current Node-RED dashboard has single-page routing and cards within the page, content elements within the cards.
Chris Reeves
@evs-chris
Dec 19 2017 17:17
gotcha
I'd say dynamic partials that add the appropriate anchors per-card would be a good solution
iterating the list of attached children by name also scales pretty well
I've used it for windows in an mdi with no issues
Julian Knight
@TotallyInformation
Dec 19 2017 17:23
OK, cool, thanks for this discussion. Definitely food for thought and a step closer. I haven't quite grasped all the concepts there yet but I will work on it. Sounds like it is possible though which is the best news! :) thanks again.
Cerem Cem ASLAN
@ceremcem
Dec 19 2017 22:00
@Rich-Harris you remind me D.J. Bernstein :)
"one man army - for the web" :P
shal1y
@shal1y
Dec 19 2017 22:02

Hey Guys... I used to do this with 0.7 for a transition

intro="transitionName:{ 'x':{{modelArg1}}, 'y':{{modelArg2}} }"

What is the way to do the same thing in 0.8 or 0.9... the docs are not that helpful when doing args with mustache in them...

Rich Harris
@Rich-Harris
Dec 19 2017 22:03
@ceremcem i had not heard of bernstein, but i like that tag line!
shal1y
@shal1y
Dec 19 2017 22:05
Ive tried doing..
trans-in="{x: {{modelArg1}} }, {y: {{modelArg2}} }"
and also...
trans-in="{ x: {{modelArg1}}, y: {{modelArg2}} }"
but no bueno :(
shal1y
@shal1y
Dec 19 2017 22:21
@Rich-Harris could you help me out here?
Cerem Cem ASLAN
@ceremcem
Dec 19 2017 22:21
@shal1y interesting.. this should work, as https://github.com/ractivejs/ractive-transitions-slide#ractive-transitions-slide says. you may better open an issue. this way you would help for later uses
shal1y
@shal1y
Dec 19 2017 22:22
@ceremcem I read that doc too before I got here... :( Does not work that way :(
@ceremcem thanks though :)
Cerem Cem ASLAN
@ceremcem
Dec 19 2017 22:23
I guessed that :) issues are resolved faster than gitter, trust me :)
Rich Harris
@Rich-Harris
Dec 19 2017 22:23
@shal1y i'm the wrong person to ask but have you tried trans-in="{x: modelArg1, y: modelArg2 }"?
shal1y
@shal1y
Dec 19 2017 22:24
@Rich-Harris I'll try that ... "without the mustache"
Chris Reeves
@evs-chris
Dec 19 2017 22:25
twould be trans-in="{ x: modelArg1, y: modelArg2 }"
shal1y
@shal1y
Dec 19 2017 22:26
@evs-chris and @Rich-Harris thanks guys... did not get "that" error this time... :)
Rich-Harris @Rich-Harris quickly edits what i wrote to match what chris wrote to hide the fact that i apparently don't know how to write syntactically valid javascript
Chris Reeves
@evs-chris
Dec 19 2017 22:28
actually, based on the examples, the first of which I missed, yours was totes legit 😁
two args to the transition after the node rather than one
Joseph
@fskreuz
Dec 19 2017 22:40
Just throwing this in, syntax for transitions https://ractive.js.org/api/#42-in-42-out-42-in-out
Chris Reeves
@evs-chris
Dec 19 2017 22:41
so what you're saying is 42 is the answer?
Joseph
@fskreuz
Dec 19 2017 22:41
yes :smile:
42 is coincidentally ascii for * :smile: