Hi,
i little learn front-end but here i loose
un custom modal view..
this open, template is rendered normaly..
if you see code, commented, if i uncomment the hard coded nomenclatureList, the template "content" is ok.
Here my goal is render the template after collection.fetch.
the value is retreived from back-end in the this.listenTo(collection, 'sync', (collection, response, options) => { ...
but i can not pass the value and render the dialog.
Any front-end specialist ?
i little learn front-end but here i loose
un custom modal view..
this open, template is rendered normaly..
if you see code, commented, if i uncomment the hard coded nomenclatureList, the template "content" is ok.
Here my goal is render the template after collection.fetch.
the value is retreived from back-end in the this.listenTo(collection, 'sync', (collection, response, options) => { ...
but i can not pass the value and render the dialog.
Any front-end specialist ?
PHP Code:
define('custom:views/meeting/modals/dialog-care-nomenclature', ['views/modal', 'model', 'collection'], function (Dep, Model, Collection) {
return Dep.extend({
backdrop: true,
templateContent: `
<div class="margin-bottom">
<p>{{viewObject.message}}</p>
</div>
<div>
<table width='100%'>
<tr>
<td width='20%'>nomenclature</td>
<td width='20%'>amountBase</td>
<td width='20%'>amountInsurance</td>
<td width='20%'>amountPatient</td>
<td width='20%'>nomenCode</td>
</tr>
</table>
</div>
<br />
<div>
<table width='100%'>
{{#each viewObject.nomenclatureDataList}}
<tr>
<td width='20%'>
<button
class="action btn btn-{{style}} btn-x-wide"
type="button"
data-action="setCare"
data-nomenclature="{{name}}"
data-nomen-code="{{nomenCode}}"
data-amount-base="{{amountBase}}"
data-amount-Insurance="{{amountInsurance}}"
data-amount-Contact="{{amountContact}}"
>
{{label}}
</button>
</td>
<td width='20%'>
{{amountBase}}
</td>
<td width='20%'>
{{amountInsurance}}
</td>
<td width='20%'>
{{amountContact}}
</td>
<td width='20%'>
{{nomenCode}}
</td>
{{#if selected}}<span class="check-icon fas fa-check" style="vertical-align: middle; margin: 0 10px;"></span>{{/if}}
</tr>
{{/each}}
</table>
</div>
<br/>
<div class="margin-bottom">
<p>Select one nomenclature</p>
</div>
`,
setup: function () {
Dep.prototype.setup.call(this);
let collection = new Collection;
collection.url = 'Meeting/' + this.model.get('id') + '/Nomenclature';
this.wait(
collection.fetch()
);
this.$header = $('<span>').append(
$('<span>').text(this.translate(this.model.entityType, 'scopeNames')),
' <span class="chevron-right"></span> ',
$('<span>').text(this.model.get('name')),
' <span class="chevron-right"></span> ',
$('<span>').text( 'Nomenclature' )
);
this.nomenclatureDataList = [];
this.listenTo(collection, 'sync', (collection, response, options) => {
let val = response.list;
val.forEach(function (item) {
nomenclatureDataList.push(item);
});
this.reRender();
//
});
/*
let o = {
name: 'LOGVAR',
nomenCode: 'logVar',
style: 'success',
label: 'LOGVAR',
selected: '',
amountBase: 1,
amountInsurance: 2,
amountContact: 3,
};
this.nomenclatureDataList.push(o);
o = {
name: 'LOG015',
nomenCode: 'log015',
style: 'default',
label: 'LOG015',
selected: '',
amountBase: 15,
amountInsurance: 0,
amountContact: 0,
};
this.nomenclatureDataList.push(o);
*/
console.log('END SETUP');
},
actionSetCare: function (nomenclature) {
console.log(nomenclature);
console.log(nomenclature.nomenCode);
this.trigger('set-care', nomenclature);
this.close();
},
});
});
Comment