How to update binded variable with function


#1

Hi guys.
I’m wondering, how do it right.
I have some variable that is binded with element in view file.
It’s model.bg.
First, it has value red, and view element expects:

<StackLayout verticalAlignment="bottom" row="2" class="bottom-nav" id="bottom-Nav" backgroundColor="{{ bg }}"

All fine. next im navigating to another page, and the question is , how to tell view file that property is changed ?
The result of console.log() will be green, but view file is nit updated.
Thanks for any help.

var Observable = require("data/observable").Observable;

exports.load = function(args) {

    var page = args.object;
    var model = new Observable();

    var frame = require('ui/frame');
    var topmost = frame.topmost();

    model.bg = 'red';

    model.controls = 'res://icon-back';
    model.headerLogo = 'res://logo-white-text';

    model.action = function() {
        global.mainMenu();
    };

    model.loadDashboard = function() {
        topmost.navigate("dashboard/dashboard/dashboard");
    };

    model.loadTask = function() {
        topmost.navigate("dashboard/task/task");
    };

    model.test = function() {
        var page = require("ui/page");



        if (frame.topmost().currentEntry.moduleName == 'menu/menu') {
            return false;
        } else {
            var navigationEntry = {
                moduleName: "menu/menu",
                context: { css: "pages" },
                //animated: false
            };
            topmost.navigate(navigationEntry);
            model.bg = 'green';
            console.log(this.bg);
        }
    };

    page.bindingContext = model;

};

#2

Try model.set(“bg”,“green”);


#3

Thank you @dlcole ! Works wery well !