New feature: deferred ylcElementInit

[ciolben]

Hello!

This time it is not an issue but an idea of enhancement (note it would be great to add "enhancement" label to this "issue". I don't have write access so I can't do it myself).

Let say I want to use a jquery plugin called DataTable on:

<table data-ylcElementInit="initTable">
  ...
    <tr data-ylcLoop="row: rows">
      ...
    </tr>
</table>

with:

initTable: function(...) {
  $('table').DataTable(...);
}

So I will use the ylcElementInit attribute to init the table. That works well.

Now, let say I want to init the DataTable after an ajax call in the future. As initTable is inconditionally called after the init method of the controller, the <table> has been rewritten by the plugin and ylc has no handle anymore on it => initTable will never be called from now on and the loop for the <tr> has disappeared.

Workaround: if I know I will populate the table only once in the future, I will not use ylcElementInit, but something like:

ajax(url, function(response) {
  context.updateModel(function(model) {
    model.rows = response.rows;
    setTimeout(initTable, 1000); //ugly
  });
});

Proposal (for this case): add a new proto to updateModel, so we can do:

  context.updateModel(...).then(...); //like a promise

Better: internally make a template of the elements with the attribute ylcElementInit, and each time something in the children of the table has changed, recall the init element function.

What do you think?
Thank you for your time!

[pr83]

Hi, thanks for your suggestion. I will have think how to solve it after I return from my holiday.

[pr83]

Hi,
I have had a look into it.

I'm not saying it can't be done for other jQuery plugins to be more usable with Yellow code, but for DataTables in particular, have you considered pushing the data directly to DataTables from JavaScript using the API? (I mean something like this: https://stackoverflow.com/questions/27778389/how-to-manually-update-datatables-table-with-new-json-data). I think that's a much safer approach. If the data is updated via Yellow code, it essentially gets first copied over from JavaScript to the DOM, then DataTables again reads it from DOM and copies it over to its JavaScript structure and then again writes it to DOM. That's quite complicated and error-prone.

But maybe you have some reason why to push the data to DataTables via Yellow code which I don't know about. In that case, could you please attach a stripped-down code sample with some explanation?

Thanks.

[ciolben]

Hi,

I thought you would answer something along these lines :)

Yes, maybe DataTables is not the perfect exemple, but the idea is we could keep the flexibility of designing the <table> element with ylc, notably for loop and complex td elements.

I think allowing an arbitrary function call after updateModel could also be of some use if we are imaginative.

[telesma]

Another event "ylcElementReinitialized" could possibly also be an option. Which gets triggers after "updateModel"

[pr83]

OK, so basically an event which will be triggered if some part of the DOM under the element, which has the attribute ylcElementReinitialized (or however it will be called), is modified by YLC. Yes, I think that's doable.

[ciolben]

Yes, so to clarify the possible solution, we would have for instance:
Step1 (template defined)

<div data-ylcElementReinitialized="initfunc">
  <div data-ylcLoop="entry: entries">...</div>
</div>

Step2 (transformation by a plugin or something, after initfunc being called)

<div data-ylcElementReinitialized="initfunc">
  <ul>
  <li>...</li>
  <li>...</li>
   ...
  </ul>
   ...
</div>

Step3 (we modify entries in the model)
Step4 (we call initfunc again automatically) -> go back to step2.

What do you think?
Note: I would like to help with the developement, but I really don't have enough time to go deep inside, maybe later.

[pr83]

Hi,
I have published a new release with improved 3rd party plugins support.

It's documented at
http://any3w.com/ylc/jqueryWithinYlc.html

[ciolben]

Thank you for your work! Now the library becomes even more powerfull while keeping its usage simple.

Well done mate!

🥇

[telesma]

Thank you very much for your effort!
I have just one question: Are the "data-ylcChildrenInit" and "data-ylcDomChanged" events also available as e.g. "data-ylcEvent='ylcChildrenInit: installDataTables'", or is this kind of event handling depreciated?

[pr83]

Hi.

or is this kind of event handling depreciated

It's deprecated, because to me it seemed quite verbose. But of course it doesn't have to be that way, I'm open to hearing about any reasonable use cases.

[telesma]

It is more verbose, but it would integrate more uniformly with the existing event markup.