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
Norbert Haberl
@nhaberl
The decorator is classic with teardown and update functions. (but gets never called as I said)
When no serverside requests are made within the plugin everything works like expected
/**
 * Handles global logic within CSS Portal.
 *
 * Version:
 * 1.10.19
 *
 * Depends:
 * jquery.js > 1.8.3 ?
 *
 * Demo and Documentation:
 * http://datatables.net/
 * Serviceportal.Site/Documentation/index.html
 * 
 * 
 * Automatic onClick event listener for elements:
 *  Elements with the class "dt-clickable" automatically recieve an onClick listener, which reads all data-* attributes and forwards them to either the default or the given function.
 *  The default function which is called, is the "dt.elementClicked" function and can be overwritten by defining an 'data-fire=""' attribute
 *  e.g. with default function
 *  Element: <button class="dt-clickable" data-location-id="5138" data-order-id="2186">Details</button>
 *  Function call: dt.elementClicked(context, {orderId: 2186, locationId: 5138});
 *  e.g. with defined function
 *  Element: <button class="dt-clickable" data-location-id="5138" data-order-id="2186" data-fire="onShowDetails">Details</button>
 *  Function call: onShowDetails(context, {fire: "onShowDetails", orderId: 2186, locationId: 5138})
 **/

var datatablesdecorator = function (node, data, options) {

    var instance = this;
    var isLegacy = !$(node).hasClass('block');
    initBSDataTables('en'); //set Bootstrap styling and i18n
    var $options = $.extend(true,{
        //LC: 'en',
        order: [[0, 'asc']],
        pagingType: 'simple_numbers',
        paging: true,
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        autoWidth: true,
        scrollX: false,
        searching: true,
        info: true,
        columns: [],
        columnDefs: [],
        buttons: $.fn.dataTable.defaults.buttons,
        hideHeader: false,
        fnInitComplete: function (oSettings, json) {
            $('#' + node.id + '_length select').select2({
                minimumResultsForSearch: -1
                //TODO: language should be set here with language: langForSelect2
            });
            if (options.hideHeader) {
                $('#' + node.id + '_wrapper .dataTable thead').hide();
            }
        },
    }, options);

    console.log($options);

    var table;
    if (isLegacy)
        table = $(node).DataTable($options);
    else
        table = $(node).find('table').first().DataTable($options);

    if (data) {
        table.rows.add(data);
    }
    table.draw();

    $(node).on("click", '.dt-clickable', function () {
        var data = $(this).data();
        if (data.fire) {
            instance.fire(data.fire, data);
        } else {
            instance.fire("dt.elementClicked", data);
        }
    });

    $(node).on('processing.dt', function (e, settings, processing) {
        if (processing && !isLegacy)
            SSI.loader.loading('#' + node.id);
        else
            SSI.loader.stoploading('#' + node.id);
        instance.fire('processed', node.id);
    })

    return {
        teardown: function () {
            table.destroy();
        },
        update: function (data) {
            SSI.debugger.info('Data from datatablesdecorator-Update');
            SSI.debugger.info(data);
            if (data) {
                table.clear();
                table.rows.add(data);
                table.draw();
            } else {
                table.clear();
                table.draw();
            }
        }
    };
};
Norbert Haberl
@nhaberl
We are really struggling ... any help much appreciated
Chris Reeves
@evs-chris
outside of a bug in decorators, my guess would be the decorated element is getting re-rendered due to an if block? Is teardown getting called before the decorator is initialized again? It's kinda hard to diagnose this kind of thing without a sample to poke. I'm guessing this isn't a public project? I'd be happy to take a look if you can dm me link or set up a screenshare.
Norbert Haberl
@nhaberl
@evs-chris thanks, teardown is never called I have logged it) I send you credentials for the website. If you have some spare time we can look together
Norbert Haberl
@nhaberl
@evs-chris is there anything wrong with the playground ? Components do not work, tried on several browsers
Chris Reeves
@evs-chris
@nhaberl yep, it looks like you're looking for goto in the data, but it's an instance method, so you can hit it with @this.goto or just @.goto
since my turn around is abismal due to gitter never notifying me of comments until a few hours later via email, I've enabled discussions over on the ractive github repo
I've no idea how they compare to gitter, but if they let me know when someone has a question, that would certainly be an improvement
so, if you land here looking to discuss something, please give the github discussions a shot:

discuss ractive on github

Chris Reeves
@evs-chris
@nhaberl did you get the helper thing figured out? I got an email, but the chat seems to have disappeared
Norbert Haberl
@nhaberl
@evs-chris thanks, yes...I initialized the helper function in a script which got called a
In ractive complete event :)
Norbert Haberl
@nhaberl

Hi, what's the prefered way to run jQuery stuff after new data is fetched from server and set to data.xxx.
In the ajax success handler it's too early I see ... the dom is not ready so jQuery logic isn't working.

Do I have to write a decorator ?

Chris Reeves
@evs-chris
if it's only going to load once, you could do it when the render event fires, or if it could happen multiple times, you could do it in render and in an observer or wherever the data is being set
Dayton Lowell
@daytonlowell
It took me a bit of debugging today to realize that I can't use hyphens in my events names. I wonder if maybe Ractive should warn if you try to use hyphens in your event names.
From the docs:
"Multiple events can also be tied to the same handler by appending event names to the directive, separating them by hyphens:"
Ractive({
  template: `
    <button type="button" on-hover-click="@this.someMethod()">Push me!</button>
  `,
  someMethod () {
    console.log('Fires on hover and on click!')
  }
})
Chris Reeves
@evs-chris
yeah, that's one of those things that makes a lot of sense in a dom context of if you only use camel case, but falls apart when you use kebab case to match attributes
you can escape a - with a \ if needed, but I won't pretend that's ergonomic
Dayton Lowell
@daytonlowell
So I would like to perform a CSS animation on some DOM nodes. I want the animation occur when the DOM nodes get updated by Ractive. Here's an example of what I'm doing in vanilla JS. https://jsbin.com/boboborebi/edit?html,js,output
Even if I could get the DOM nodes that were updated as a result of a ractive.set, that could be useful.
Right now I have to tightly couple my data updates with my DOM via element.animate
Chris Reeves
@evs-chris
@daytonlowell you could use the invalidate callback of a decorator if you're on 1.3 or edge e.g. https://jsbin.com/cayokixafe/1/edit?html,js,output
any time the decorated node gets bubbled past in the render cycle (it or downstream content is updated), the invalidate callback will be called, if supplied
ugh, it didn't save my html changes
but the decorator works if the template is set up with <span as-foo>{{bar}}</span><input value="{{bar}}" />
huh
it also missed the duration passed to animate
Dayton Lowell
@daytonlowell
That's awesome! Thanks @evs-chris!
Dayton Lowell
@daytonlowell
What's everyone use for the file extension for the ractive template files?
I've always used .html but I'm it'll be easier to get syntax highlighting of the handlebars if I start using a different extension
image.png
Also VS Code does some weird formatting of handlebars
Chris Reeves
@evs-chris
I use .ractive.html, as pain old html highlighting is usually good enough for me, and the .ractive. part makes it easy to target with tooling
Jijo Joseph
@jijojosephk
I'm looking for suggestions on a design which I'll explain below
I have one main component and a few child components
based on different situations some child components get visible or invisible
when they get visible, they'll have some data rendered from an API call result.
There are situation where when one of child component is get's invisible others need to be visible
What's the best strategy for achiving this?
Imange it's an edit form when I save the form should be invisible and a previous component should get visible
Dayton Lowell
@daytonlowell
Are you using a state router or just handling it all in memory in Ractive?
Dayton Lowell
@daytonlowell
So I'm trying to use component scoped css in Ractive and it seems to work as expected when I throw my css in the css initialization prop in my component. But If I put a <style> tag in the component template instead, it just throws it into a style tag unmodified in the <body>. This bit of the docs seems to imply that component scoped css is supported if I put my css in the component template. https://ractive.js.org/api/#component-files
Am I wrong on that?
I wanted to put it in the template to get css syntax highlighting...
Dayton Lowell
@daytonlowell
oh, you can't put it in the template, you have to put it in the component file itself, which in my case is a .js file
dang
paulie4
@paulie4
We use non-visible Ractive instances as Flux Stores, which visible Ractive instances are linked to. When a visible one dispatches an event, the non-visible one(s) get updated, and the dependent visible ones also get updated as a side-effect.