blikblum / tinybind

Lightweight and powerful data binding + templating solution
http://blikblum.github.io/tinybind/
MIT License
80 stars 14 forks source link

the template for component is not done correctly #27

Closed julientype closed 4 years ago

julientype commented 4 years ago

styles are toasted.... but can be fixed .....

Luiz Américo i see you responded to the last entry post..grate.... your still active...

Try and use this component as a programmer calling card....to build networking clients

here is what i mean..... you built a component and programmers get clients and they need help.... Add your account here ....... and set up your freelancer links correctly on github front page.....

https://www.freelancer.com/jobs/coding/

Now you get to services projects that need your help...... then you can also add other profile links that help you build and service it....... networking......

if you need help post your project here or for a one one......

when look at your guithub site you look at dates logs..... your last date is 12 months ago basically you edit samples and help ....... your run time code dates can be old it shows your stable... it takes years to get users to support the component.....

I ran a test tinybind vs knockout...... you won 500 ms +

all try and fix it at my end......

julientype commented 4 years ago

class App extends tinybind.Component static get template <---ok static get tagname <----add static get styles<----add constructor() { super(); <----not need its done at create tinybind.Component

customElements.define('my-app', App);<----not need its done at create tinybind.Component

the the tagname is the component not the template you created in create tinybind.Component

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.

its not template tag its the one i send to tinybind.Component Load an and unload let shadow = elementRef.attachShadow mode: 'open' let shadow = elementRef.attachShadow mode: 'closed

var style = document.createElement('style'); style.textContent = "i send you styls" var myDiv = document.createElement('DIV'); myDiv.innerHTML = "the template i sent you"

shadow.appendChild style; shadow.appendChild myDiv ;

customElements.define 'my-app.tag', your-Template-class); I simply extend its features and inject what you need....

code is all done..... we now have isolated dom and styles in tinybind.Component and i can create more the one also...... by doing it over and over because tinbind lets you already

tinybind.bind(document.getElementById("test1"), model); tinybind.bind(document.getElementById("test2"), model); tinybind.bind(document.getElementById("test3"), model);

class Message extends tinybind.Component static get template() return `

Hello {message}

======= ` Alll done please fix lol..... the constructor() needs to be at my end.. not sure but it should work and tinybind become a component only no more calls like this tinybind.bind(document.getElementById("test3"), model); no more function needed its by done in the constructor by Tag id calls from javasript to the component this can be strip out later

julientype commented 4 years ago

nope did not work...... tinybind is not setup to run a shadow dom...... i tried in the component you used doument.cerateElement 'template' Dom ignores it.... so styles wont work........ but it should work like this class myApp extends HTMLElement constructor() super(); // Create a shadow root var shadow = this.attachShadow({mode: 'open'}); its using HTMLElement not App extends tinybind.Component i can now create the shadow root ====== the solution is like this===== tinybind.bind(shadow.element, model); i can now isolate tinybind in the container from the element the old way.... then inject template and styles to..... class myApp extends HTMLElement

components are tricky to big they fail.......when you attach to mush junk code to it

with shadow dom everything is isolated and naming this.modal = [] tinybind.bind(shadow.element, model.tables.item.list); it only sent part of the model

julientype commented 4 years ago

your not a component your a algorithms lib to a component i create..... anyway..... my allotted time is done till fall ... i have personal work to do feel free to close this as i network entry with you.... or i will close it.... my time is my time and respect your time. with your response.. i cant do more till fall. winter ..it takes time and focus to build and test.. feel free to respond i just cant test code build nothing now... its summer try not too do all or the user is lost in you dogma code... a lib is not a component but a component needs a lib.. when i respond its endless ... it test code and respond live to you get logs to what i test logs did you do do the time no i did so its logged to you ... these are my problem i keep recording to you feel free to jump in.... i record steps to you its not a chat its that i log in step as i code and test to you.. its not spam its step recorded i cant wait for you i'm running a test logs to you we close test logs... long winded rants ... debug .... we see what is not yet is.. logs its not my way o n way you learn by the debugger logs... i so i rant what to you logs i and if you respond you redirect the logs i created... debug logs calked inputs on my tine dime not you..you get slush logs to re define the entry .slush logs ranters.. test log steps...

blikblum commented 4 years ago

Thanks. The component is pretty simple but does the job.

julientype commented 4 years ago

come fall all run more test.... i did do tinybind vs tinybind.component <--it ran mush slower and had problems with styles... where tinybind.bind to a div did not it has to do with doument.cerateElement 'template' an unregistered tag name + you created the element not dom with class myApp extends HTMLElement you now created the custom tag to dom with instructions. whats nice about this is i can use JavaScript to manipulate the new element doument.createElement ''my-new-tag' I dont need to register a function to tinybind i use the html tag id.myfunction() created in the class the class holds reference to a tinybind view Its just a lib of algorithms this way....... var my = doument.createElement ''my-new-tag' my.loadfunction( a, b c) <<<<<function before append document.appendchild (my) i just load data into the new element and ran a filter.... tinybind is a lib for speed binding and indexing calls to avoid loops
its something you can mull over for summer......