by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 31 2019 21:51

    evs-chris on dev

    safer, though maybe slightly le… minifiable undefineds (compare)

  • Jan 30 2019 20:04
    RustyDev starred ractivejs/ractive
  • Jan 30 2019 10:40

    evs-chris on dev

    fix parent context of component… (compare)

  • Jan 29 2019 08:44
    dashiwa starred ractivejs/ractive
  • Jan 28 2019 21:47

    evs-chris on dev

    fix shuffling when more than on… shuffling binding mystery bug t… don't shuffle an autoshuffling … (compare)

  • Jan 28 2019 19:29
    aligoren starred ractivejs/ractive
  • Jan 28 2019 15:30
    meetajhu starred ractivejs/ractive
  • Jan 27 2019 23:18
    4lm starred ractivejs/ractive
  • Jan 26 2019 10:22
    meetajhu starred ractivejs/ractive
  • Jan 25 2019 22:25

    evs-chris on dev

    fix a few corner cases on autom… (compare)

  • Jan 25 2019 06:22

    evs-chris on dev

    add support for automatically l… (compare)

  • Jan 23 2019 16:37
    frncsdrk starred ractivejs/ractive
  • Jan 20 2019 12:44
    0851 starred ractivejs/ractive
  • Jan 15 2019 15:40
    dagnelies closed #3292
  • Jan 15 2019 15:40
    dagnelies commented #3292
  • Jan 15 2019 15:34
    evs-chris commented #3292
  • Jan 15 2019 15:34
    evs-chris commented #3292
  • Jan 15 2019 15:29
    dagnelies commented #3292
  • Jan 15 2019 15:29
    dagnelies commented #3292
  • Jan 15 2019 15:26
    evs-chris commented #3292
Cerem Cem ASLAN
@ceremcem
2. Ractive.parse(template, {+textOnlyMode, +preserveWhitespace}) works as expected
Cerem Cem ASLAN
@ceremcem
@evs-chris have you thought about include/import mechanism like <link rel="ractive" ... /> for textOnlyMode?
or should we just introduce any syntax to search and replace, like {{ include ./path/to/file }}, before passing the file to Ractive.parse()?
I mean, do you recommend a syntax for this?
Chris Reeves
@evs-chris
so far, all my uses like this have been on the backend, so it's been calls to Ractive.parse after loading from a file or a submitted form fronted by code mirror
I also try not to do any parsing at runtime if I can help it so I can use the runtime ractive bundle and avoid that extra exec time
Cerem Cem ASLAN
@ceremcem
hmm
okay. I may concatenate the files with {{ include ... }} syntax and then cache the result for actual use
thanks.
Chris Reeves
@evs-chris
it just occurred to me what you were asking... the ractive binary supports loading templates from other files when it parses
so if you have all the files already, you can do it at build time
the playground uses the binary lib, which has an fs abstraction, to do the same thing on the client side
so far, this is only really for partials, as other use cases haven't really come up before
Cerem Cem ASLAN
@ceremcem

the ractive binary supports loading templates from other files when it parses

I don't think this is exactly the same case as mine. Mine is more like source of Bash, include of Pug or C; an absolute "copy and paste" action

Cerem Cem ASLAN
@ceremcem

is there anything we can do for whitespace alignment while using if or each blocks? For example, following example:

#define {{mcu.chibiDef}}
{{#if mcu.chibiDef === 'STM32F030x4'}}
#define STM32F030x6 
{{/if}}

produces following, intended result:

#define STM32F030x4
#define STM32F030x6

However, when we arrange indentation a little bit to make it readable, the output is indented the same amount:

#define {{mcu.chibiDef}}
{{#if mcu.chibiDef === 'STM32F030x4'}}
    #define STM32F030x6 
{{/if}}

outputs:

#define STM32F030x4
    #define STM32F030x6

Can {{#if}} block ignore a configured number of whitespaces?

Chris Reeves
@evs-chris
unfortunately not at this time, because whitespace is not significant in most of html
Dayton
@daytonlowell

Svelte has this really handy shorthand for event modifiers, so you can do things like

<form on:submit|preventDefault={handleSubmit}>

Any interest in having such a thing in Ractive?

Chris Reeves
@evs-chris
yes, and note that ractive supports event args in parens as <form on-submit(arg1,arg1)=firedEvent>, so theoretically, the non-custom event handlers in the library just need to pull out strings or look at the ref names or something similar
eh, that second one should be arg2
Dayton
@daytonlowell
This isn't a ractive-specific question, but is there a term for this concept which I do a lot?
function(ractive, keypath, key, incomingObj) {
    const index = ractive.get(keypath)
        .findIndex(item => item[key] === incomingObj[key])

    if(index > -1){
        ractive.splice(keypath, index, 1, incomingObj)
    } else {
        ractive.push(keypath, incomingObj)
    }
}
Chris Reeves
@evs-chris
@daytonlowell I'd call that an upsert
typically reserved for more database-y applications, but I'd say it works for an array as well
Cerem Cem ASLAN
@ceremcem
Dayton
@daytonlowell
Thanks
Norbert Haberl
@nhaberl

I have an ASP.NET (no node, no ES6) web appliocation and would like ti use components ... so I am strugglinh with where to put and call what files ...
I would like to have 1 single js or html file with all the component needs (script and markup)

It will be rendered all the time the pages load ... so no need for a loader or so.

paulie4
@paulie4
The code will need to wait for either the DOMContentLoaded or load event (see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) to know when things are ready and it's time to start creating the Ractive instances.
Chris Reeves
@evs-chris
I would recommend using ractive component files (.ractive.html) along with an entry script (index.js) and rollup with rollup-plugin-ractive-bin to grab all of your ractive components, pre-compile their templates, and squish then together into a single script. You can then include ractive in a script tag at the bottom of the body, immediately followed by your bundled ractive components, and everything should work as expected. There's an example component on the rollup-plugin-ractive-bin readme, which you can import from your index with import mycomponent from './pathto/mycomponent.ractive.html':. You can also transition this sort of setup to typescript if you want to add a bit more refactorability later on.
Dayton
@daytonlowell

Anyone know if theres any performance difference between

const foo = ractive.get('foo')
const bar = ractive.get('bar')

and

const { foo, bar } = ractive.get('')
(Ignoring the fact that the latter won't work in a computed property)
Dayton
@daytonlowell

Also, unrelated, when using a muli-keypath observer, I find myself almost always getting all of the current values in the observer callback, like this

ractive.observe('foo bar baz', (oldVal, newVal, keypath) => {
    const { foo, bar, baz } = ractive.get('')
})

and I wonder if it might be nice if the callback included the current values for all of the observed keypaths, something like

ractive.observe('foo bar baz', (oldVal, newVal, keypath, currentValues) => {
    console.log(oldVal) // ''
    console.log(newValue) // 'Hello'
    console.log(keypath) // 'foo'
    console.log(currentValues) // { foo: 'Hello', bar: '', baz: '' }
})
Cerem Cem ASLAN
@ceremcem

Anyone know if theres any performance difference between

Chris would know better, but I guess there will be a negligible difference, if there is any.

paulie4
@paulie4
Dayton
@daytonlowell
in the case of ractive, the first one has the overhead of 2 function calls(get) while the latter only has a single fn call.
paulie4
@paulie4
That's a good point.
Chris Reeves
@evs-chris
the individual gets would be more performant in the case of a root access, which defaults to { virtual: true } and thus builds out a shallow object tree for all of the data in the instance
so it should work for computeds as well as linked in paths
passing { virtual: false } would probably reduce the overhead
as for the observer, passing multiple keys is shorthand for passing them individually and behaves the same way
additionally, after keypath, you get wildcards from your keypath, so ractive.observe('foo.*.bar.*', (old, new, path, star1, star2) => ...) gets the stars filled in
Chris Reeves
@evs-chris
I think old and new are switched there too
yeah, new comes first
Norbert Haberl
@nhaberl
Is there an event on the global ractive instance where I can register some init code when any template has rendered?
Reason is that we use a lot of jQuery plugins and would like to init them when any template is ready to use
Cerem Cem ASLAN
@ceremcem
you can use oncomplete event for that purpose
Norbert Haberl
@nhaberl
@ceremcem so how I can I acces that globally (not on the instance)
Cerem Cem ASLAN
@ceremcem
is there something prevents you from using new Ractive()'s .on{complete: ...} event?
new Ractive({
  ...,
  on: {
    complete: function(){
      // main instance is rendered, so you can run jQuery stuff at this point
    }
});
Chris Reeves
@evs-chris
@nhaberl there isn't really a global event system, but you can approximate one by using a base component for all of your other instances e.g. const Base = Ractive.extend({ on: { init() { ... } } }); and instead of new Ractive(...) use new Base(...) and instead of further Ractive.extend(...) use Base.extend(...)
Norbert Haberl
@nhaberl
@evs-chris thanks, exactly what I needed ... I will create a specific base "class" for the whole site
Dayton
@daytonlowell
So I have a component where I do a ractive.set({ foo: someClassInstance }) and I noticed that if I do a ractive.findAllComponents() in the parent and try and call a prototype method on foo, it's undefined. It works find if I do ractive.get('foo').someProtoMethod from within the component. Does Ractive do some sort of copy in findAllComponents that omits the prototype methods? Interestingly, findComponent includes the full proto chain.
Chris Reeves
@evs-chris
it shouldn't, and if it does, I think that's a bug