Component does not see change of model property
gitowiec opened this issue · comments
I need to change the value of binded property for custom component.
I am using RivetsJS version: 0.9.6 with sightglass unbundled (because I load it via requirejs).
I managed to write 3 app pages (Wordpress plugin admin pages) with RivetsJS working properly, but I didn't used components until now. I thought that using component (custom <select>
) will ease my work with nested rv-each-option="options" for <select>
element.
I have a rv-each-asset="model.assets" loop working on this:
<div>
<label>Portfolio</label>
<select rv-value="model.portfolio_id" name="portfolio_id">
<option>-- choose --</option>
<option value="1">First portfolio</option>
<option value="2">Second portfolio</option>
<option value="3">Third portfolio</option>
<option value="5">Another portfolio</option>
</select>
</div>
<table class="pg-table">
<tr rv-each-asset="model.assets">
<td>
<input type="hidden" rv-value="asset.id" name="asset[id]">
<input type="hidden" rv-value="asset.id_orbi" name="asset[id_orbi]">
<ticker-options portfolio-id="model.portfolio_id" assets="portfoliosAssets"></ticker-options>
</td>
<td>
HERE IS JUST FOR TESTING, DOES PORTFOLIO_ID CHANGES?
<input type="text" rv-value="model.portfolio_id" name="asset[chart][date][from]">
</td>
<td>
<input type="text" rv-value="asset.chart.date.to" name="asset[chart][date][to]">
</td>
<td>
<textarea name="asset[text]" rv-value="asset.text"></textarea>
</td>
<td>
<input type="text" rv-value="asset.params" name="asset[params]">
</td>
<td>
<input type="checkbox" rv-checked="asset.legend" name="asset[legend]">
</td>
<td>
<button data-portfolio-id="" type="button"
class="ui-icon ui-icon-red ui-icon-circle-close" rv-on-click="deleteRow"
rv-data-name="asset.ticker" data-meaning="delete"></button>
</td>
</tr>
</table>
My component is defined like this:
function SelectController(data) {
console.log('initialize new fun');
var self = this;
self.model = data.model;
self.assets = data.assets;
// self.options = {};
console.log('selectController this', this);
console.log('selectController self', self);
self.clicked = function (evt, context) {
console.log(evt);
console.log(context);
context.options = context.assets[context.model.portfolio_id];
// context.model.
console.log(context.options);
};
}
rivets.components['ticker-options'] = {
template: function () {
// console.log(this);
let template = '<select rv-on-click="clicked" value="">' +
'<option rv-each-option="options">{option}</option>' +
'</select>';
// return '<option value="{data.ticker}">{data.ticker}</option>';
return template;
},
initialize: function (el, data) {
console.log('initialize');
// console.log(el);
console.log(data);
return new SelectController(data);
}
};
The Rivets is initialized like this:
this.scope = {
model: {
id: null,
portfolio_id: null,
publication_date: null,
created_at: null,
edited_at: null,
weekly_annex: 0,
summary: null,
pdf_generated_at: null,
assets: [{
id: null,
id_orbi: null,
ticker: null,
chart: {
date: {
from: null,
to: null,
}
},
text: null,
params: null,
legend: null
}]
},
portfoliosAssets: {"1":['AAA','BBB','CCC','DDD'],"2":['EEE','FFF'],"3":['GGG']}
};
this.view = rivets.bind(editOrbiForm, this.scope);
When I use in a browser <select rv-value="model.portfolio_id" name="portfolio_id">
to change model.portfolio_id value - it's fine, it changes the value. But I would like to <ticker-options>
see that model.portfolio_id change, what I do wrong?