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?
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
okay. I may concatenate the files with
{{ include ... }} syntax and then cache the result for actual use
thanks.
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
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 STM32F030x6However, 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 STM32F030x6Can {{#if}} block ignore a configured number of whitespaces?
eh, that second one should be arg2
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)
}
}
typically reserved for more database-y applications, but I'd say it works for an array as well
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.
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.
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.
(Ignoring the fact that the latter won't work in a computed property)
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: '' }
})
There's a discussion about that here: https://stackoverflow.com/questions/47099510/destructuring-variables-performance
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
yeah, new comes first
new Ractive({
...,
on: {
complete: function(){
// main instance is rendered, so you can run jQuery stuff at this point
}
});
@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(...)
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.