mikeric / rivets

Lightweight and powerful data binding.

Home Page:http://rivetsjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Component does not see change of model property

gitowiec opened this issue · comments

commented

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?