Passing objects & arrays to Components

[bmbanker]

There should be a way to pass data (that is more complex than a string, boolean, or number) to tinybind's implementation of Custom Elements.

In rivets.js, components had an initialize function where you could pass bound data this way:

initialize: (data) => { return new Controller(data.blah, data.bleh); }

Maybe the Component object could implement a constructor with a data parameter (that references the data bound via keypaths on the page) so that these objects referenced by keypath can be used within the Component itself? Maybe a method could also be implemented for when that data changes or is updated?

<custom-element rv-keypath-banana="boundObject.banana"></custom-element>

class CustomElement extends tinybind.Component {
constructor(data) {
this.banana = data.banana;

...
etc
...
}

Or maybe, there's already a way to do these things, and I'm crazy?

[julientype]

constructor() { super() function getItems() { return 'x' } var self =this; self.model = { name: getItems() }
}

just create whatever type of array you want....... x is a value yet you can return a large json array

[julientype]

///// get your data url query if its a large file....

window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); /////create your component class /// then in the model .....load data //// component tags are ignored till registered

}); basically all is blank and scripts are now fully loaded into memory to create and activate the component this way..... my-app /my-app html tags done....

[blikblum]

Maybe the Component object could implement a constructor with a data parameter

web component does not receive any parameter. This is by DOM design

[julientype]

Document method getElementById() this action performs a search from a given id...... the faster way is just use the registered ID..... so when you add the ID attribute dom appends more constructors to the dom like a list of 1000 elements..... if your code needs an id put one it if not dont..... use..... getElementsByName() if you want add search to find use name...... search returns an array or single element.... basically to speed up large array in tiny-bind you would want use name not id.... like run 50,ooo elements

[julientype]

i just tested it...... works like this....... constructor() { super(); var self = this; self.moo =function (a ,b, c){ alert(a + b + c); }; self.model = { name: "Base", push(event, data) { alert(data.item.name); ===== model is for tinybinding===== alert(appid.model.name); Javascript call ==== now will run a moo function ===== appid.moo("moo", " moo" ," moo"); no errors...... its not in tinybind model now add your moo data to self.model for tinybind

push(event, data) { self.moo(data.item.1, data.item.2, data.item.3) "moo", " moo" ," moo" should work.... your in the class so on a list of 500 you can pass data back to moo.. without asking dom by id ... like for each run a class in function ... or its dom class dom making it slower....

add self.model first in the class then what ever functions after tinybind needs it right away.... extends tinybind.Component it needs the model variable......

[RADKick]

Hi,

Please look at jskick https://github.com/RADKick/jskick as well, not ready for full scale components yet but has some extra functionality and would love someone help me on components, specifically have issue with nested components like tree view as component constructor calls itself before observers are ready.

[julientype]

it takes time to review ....... your code div ..font-size="model.fontSize" Added font size style div not good css offers binding services that work in tangent with DOM tree at the C level css variable loaded into C root: ---myfontSize: 12px; ---myfontColor: red;

fontsize: var---myfontSize Javascipt vs C code css is allot memory <-fast injected to C engine dom is allotted memory <-fast array elements injected to C engine JavaScript is allotted memory for its engine a text interpreter <-slow dom runs css first its in charge then JavaScript css runs dom binding first. Javescript will call css engine to change entry No JavaScript loops when you set a var css from java-scripts the engine will do the rest

[blikblum]

Please look at jskick https://github.com/RADKick/jskick

Nice work

Please note that https://github.com/RADKick/jskick#differences-from-rivetsjs--tinybindjs section mislead because those are the difference from tinybind to rivets and not from tinybind to jskick

[julientype]

passing array data test ........ 1000x30 = 30,000 items on 2gig ram your time:9098 and the component is + 1000 my way took time:73 ..lol i strip out the component to cut the down the code...... and on 100,000x30 = 300.000 my time:5098 and you got busted in wait time dialog s i created shadow dom component with styles injection i call gettable[1000] from the tinbind tempate as an embedded function to run 2 way bindings.... as you can see its supper fast.. way way way faster then knockout..... down to a 14kb size

[RADKick]

Thank you 😊. Sure will update the readme.

On Jun 12, 2020, at 9:33 AM, Luiz Américo notifications@github.com wrote:



Please look at jskick https://github.com/RADKick/jskick

Nice work

Please note that https://github.com/RADKick/jskick#differences-from-rivetsjs--tinybindjs section mislead because those are the difference from tinybind to rivets and not from tinybind to jskick

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/blikblum/tinybind/issues/25#issuecomment-643273054, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AIMS635BD3LVDGN5EB7PQHTRWIVDZANCNFSM4KXJMJTA.

[julientype]

i tested out loading 30,000 items at a time to tinybind it ran out memory at 277999 x 30 8.339.970 lol 8 million items time was 5 to 77 super fast binding on each 30,000 entry that tinybind could bind to in a flash on any item on 2gig ram i run a push button to inject 30,000++ and and view the last entry. time 6.... milliseconds 6 <--- super fast model binding

[julientype]

Thank you . Sure will update the readme. On Jun 12, 2020, at 9:33 AM, Luiz Américo notifications@github.com wrote:  Please look at jskick https://github.com/RADKick/jskick Nice work Please note that https://github.com/RADKick/jskick#differences-from-rivetsjs--tinybindjs section mislead because those are the difference from tinybind to rivets and not from tinybind to jskick — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#25 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AIMS635BD3LVDGN5EB7PQHTRWIVDZANCNFSM4KXJMJTA.

i did check it out your code .. you use regex and will cause problems with memory leaks...... your accessing a C object lib to mix with JavaScript .... tinybind did not..... i like readable code and shrinking it down too far offers nothing in speed but debugging problems when scanning for syntax errors on templates

[julientype]

new test.... master slave components at 100,000 records......inserting 30,000 items it feeds the last entry from a tinybind function to a clone.... time 6 milliseconds

[julientype]

new test....... this one is about 2 way binding and loading a template to the clone on 155,000 records time 23 milliseconds and thats pushing 10,000 records x 30 at a time with 2 gig ram its impossible to do this with knockout..... you were just a bit faster 500 then knockout both at 8000 milliseconds on 10,000 rec and i needed A good BINDING lib and it works GRATE here test out knockout http://jsfiddle.net/9ZF3g/5/ try 30,000 items or less ..... you can do crazy stuff at my speed ..... 28 frames per second lol load time for a set time out function 50 milliseconds.... svg game engine its 30,000 read write operations and + render on say 4million data points to pick from

[julientype]

new test.... will monitor the memory and at about 90% memory the app will start to have problems 2gig ram is the best way to test and build code with it fores you to think out side the box with a nice 8gig your code may not work with 2gig or less.... 100,000 rec at 3milion items and we still have lots of memory left......

[karneaud]

@RADKick would love to see how we can re-incorporate some of your ideas back into tinybind. Can you create some use cases for review and a possible fork of tinybind with test cases for review via pull request?

[RADKick]

Sure @karneaud we can

[RADKick]

And everyone just look at https://github.com/RADKick/jskick what @karneaud is referring to. I will love to see if anyone is interested to take this idea to next level for database less website like https://github.com/RADKick/serverlesssite and also if we can extend the kickjs ( or tinybind) to low code platform where we can build drag drop interface for complex screens.

[julientype]

Hi changed some of tinybind I took out the template code and the text scan found it to be a breach where one could type text and have it replace with model variable.. I also fix the sort array stack calls... I also remove the TEMPLATE class because i use shadow dom tag element registry to build objects. Its just better because you can load them as TAG and create them on demand better. new-tag id= 'newtage' newtage.nodel.runfunction();

I check your your version out but found the syntax unreadable or hard to keep in memory the space saved is not worth the time.... YES i'm able in code to load transfer model data correctly Your best to drop me an email julientype@gmail.com