Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component does not see change of model property #715

Open
gitowiec opened this issue Jul 26, 2017 · 0 comments
Open

Component does not see change of model property #715

gitowiec opened this issue Jul 26, 2017 · 0 comments

Comments

@gitowiec
Copy link

gitowiec commented Jul 26, 2017

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant