Nápad: JsWriter podobně jako PhpWriter?

Ahoj, je to sice trošku jiné řešení než tady máš ty ale konkrétně ty DataTables řeším tak že si presenteru či komponentě jednoduše sestavím objekt/pole s danou konfigurací pro datatables, tu pak přenesu do šablony a tam ji přidám do vybraného elementu (třeba TABLE) do atributu data-settings jako json string. V JS co aktivuje dataTables pak udělám jen vytažení těchto settings a případně je ještě změrguju s default hodnotama co sou natvrdo v js (shodné napříč všemi datatables instancemi) a pak je inituju.

Za cíl teď mám z toho udělat plnohodnou komponentu jako je datagrid apod, aby se dalo v presenteru zadefinovat jaké sloupce tam mají být, buttony atd a pak to vykreslit.

No tak to seš na tom cca tak jak já ;) Taky dělám implementaci DataTables ale asi né tak do hloubky jako ty. Já jsem to postavil nad Niftyho datagridem. Všechny možnosti co datatables umi tam dávat nehodlám, protože to stejnak nevyužiju a málo kdo to využije ;)

To je starý kód, už nevím přesně co jsem tím řešil. Asi navěšení js eventů po překreslení tabulky. Nová šablona vypadá takto:

{capture $datatableRendered}
<table id="{$name}" class="datatable table table-bordered table-striped table-condensed table-hover">
</table>
<script>
    (function ($, undefined) {
        $('#{!$name}').dataTable({
            "sDom":"<'row'<'span{$spanLeft}'l><'span{$spanRight}'f>r>t<'row'<'span{$spanLeft}'i><'span{$spanRight}'p>>",
            "sPaginationType":"bootstrap",
            "aLengthMenu":[
                [5, 10, 20, 50],
                [5, 10, 20, 50]
            ],
            "iDisplayStart": {(int)$params['iDisplayStart']},
            "iDisplayLength": {(int)$params['iDisplayLength']},
            "bFilter": {$bFilter},
            "bPaginate": {$bPaginate},
            "bSort": {$bSort},
            "bLengthChange": {$bLengthChange},
            "bInfo": {$bInfo},
            "sSearch": {$params['sSearch']},
            "bDeferRender":true,
            {if $sScrollX}"sScrollX": {$sScrollX},{/if}
            //"sScrollY": "300px",
            //"bScrollInfinite": true,
            //"bScrollCollapse": true,
            //"sScrollXInner": "110%",
            //"iCookieDuration": 60*10,
            "aoColumns":[
                    {foreach $columns as $c}{
                    "bVisible": {if $c->options['bVisible']}true{else}false{/if},
                    "bSortable": {if $c->options['bSortable']}true{else}false{/if},
                    "bSearchable": {if $c->options['bSearchable']}true{else}false{/if},
                            {if $c->options['sWidth']}"sWidth": {$c->options['sWidth']},{/if}
                        "sTitle": {$c->options['sTitle']}
                    }{if !$iterator->last},{/if}{/foreach}
            ],
            "bProcessing":false,
            "bServerSide":true,
            "sAjaxSource": {link ServerSide},
            "sServerMethod":"POST",
            "iDeferLoading":[{$iTotalDisplayRecords}, {$iTotalRecords}],
            {if !empty($sortingParams)}
                "aaSorting":[{foreach $sortingParams as $i => $sorting} [{$sorting['col']}, {$sorting['dir']}]{if !$iterator->last},{/if}{/foreach} ],
            {/if}
            //"sAjaxDataProp": "dataTablesData.{!$name}.aaData",
            "oSearch": {'sSearch': {$params['sSearch']}},
            /*"oLanguage": {
                "sInfoFiltered": ''
            },*/
            "bStateSave":false,
            "fnStateSave":function (oSettings, oData) {
                $.nette.ajax({
                    url:  {link SaveState},
                    dataType:"json",
                    data:oData,
                    type:"POST",
                    success:function (oData, textStatus, jqXHR) { //console.log('saved');
                    }
                });
            },
            "fnStateLoad":function (oSettings) {
                var o = false;
                $.nette.ajax({
                    type:"POST",
                    url:  {link LoadState },
                    dataType:"json",
                    async:false,
                    success:function (json, textStatus, jqXHR) {
                        o = json.datatablesLoadState[{$uniqueId}];
                    }
                });
                return o;
            },
            "fnDrawCallback":function (oSettings) {
                $.nette.load();
                {foreach $jsDrawCallbacks as $dc}{!$dc}{/foreach}
                {if $options['editable']}
                    $('.editable').editable({
                        showbuttons:false,
                        onblur:'submit',
                        source: {link EditableData},
                        sourceCache:true,
                        url:function (params) {
                            $.nette.ajax({
                                url:  {link Editable},
                                dataType:'json',
                                data:params,
                                type:'POST',
                                success:function (oData, textStatus, jqXHR) {
                                    //console.log(textStatus);
                                },
                                error:function (payload) {
                                    //console.log('payload');
                                    //var d = new $.Deferred;
                                    //return d.reject('error message'); //error via deferred object
                                }
                            });
                        }
                    });
                {/if}
                {if $options['toggle']}
                    $(".toggle-checkbox").toggleButtons({
                        animated:true,
                        width:90,
                        height:18,
                        label:{ enabled:"yes", disabled:"no"},
                        style:{ enabled:"success", disabled:"warning"},
                        onChange:function ($el, status, e) {
                            $.nette.ajax({
                                type:"POST",
                                url: {link Toggle},
                                data:{ id:$el.find("input").attr("id"), value:status},
                                success:function (data, textStatus, jqXHR) {
                                }
                            });
                        }
                    });
                {/if}
            },
            "fnServerParams":function (aoData) {
                {foreach $aoParams as $paramName => $value}
                    {if $value != "nobacklink"}
                        aoData.push({ "name": {$paramName}, "value": {$value} });
                    {/if}
                {/foreach}
            },
            "fnServerData":function (sSource, aoData, fnCallback, oSettings) {
                $.nette.ajax({
                    type:'POST',
                    url:sSource,
                    data:aoData,
                    success:function (data, textStatus, jqXHR) {
                        if ("aaData" in data) {
                            fnCallback(data);
                        }
                    }
                });
            },
            "fnInitComplete":function (oSettings, json) {
                this.fnSetFilteringDelay({$searchDelay});
            },
            "aaData": {!$aaData}
        })
    })(jQuery);
</script>
{/capture}

{!$datatableRendered}

{if $dispSetting}
    <pre class="prettyprint linenums pre-scrollable">{$datatableRendered}</pre>
    <script>prettyPrint();</script>
{/if}

Tak se dívám, že ten řádek tam mám pořád, nemám čas se teď dívat na co přesně jsem to použil, ale je to na to aby se dal přidat nějaký js callback pro speciální případy, kdy potřebuji ještě nějakým prvků navěsit eventy. To řešení se mi moc nelíbí a budu to pravděpodobně předělávat.

Editoval LeonardoCA (7. 3. 2013 13:51)

Bohužel, je to pořád experimentální :-) Jsem psal, že to potřebuje refaktoring.

Btw. co konkrétně se ti nejvíc nelíbí a jak by jsi na to šel, když už jsme u toho?

Pravda pravdoucí. Bude to výkonnější a optimalizovanější, ale taky se to i bude dát přečíst :). Z tohohle bolí hlava.

Custom callbacky mají být v Javascriptu. Konfigurovat všechno v PHP je cesta do pekel, časem nebudou konfigurační možnosti stačit a bude třeba napsat nějaký JsWriter… jakoby tomu prozřetelnost chtěla, dneska jsem četl článek, který je někde v jádru tomuto velmi blízký: http://www.drmaciver.com/…re-we-doing/

O jaké callbacky kupříkladu jde? Samozřejmě že musí být mezi Javascriptem a PHP nějaké API, kterým mohou komunikovat (prostředkem jsou ideálně ty datové atributy), nicméně čím menší vazba, tím lepší. Rozhodně bude lepší navrhnout nějaké parametry, než aby PHP muselo znát názvy nějakých funkcí v Javascriptu. Ale možná jen plkám, nevím, o jakém kódu mluvím.

nechcu vám tady do toho moc kecat, ale to je to co sem psal výše ;) v komponentě sestavím pole/objekt configu co je editovatelný, proženu to json encoderem a v šabloně to bouchnu do data atributu ;) pak v JS kde dělám nějaký init si k tomu dom elementu přistoupím, vytáhnu potřebný data atribut, spojím s defaultníma hodnotama a initnu datatables.

@leonardoCA: callbacky sem taky řešil, ale díky tomu že ty draw, redraw, savestate atd jsou stejné napříč celou appkou tak je mám normálně v tom skriptu co inituje datatables. Ale jinak klobouk dolu pokud to děláš takto hodně uni.