Javascript & knockoutjs: how to refactor the following code to be able to access the properties outside the function

Question

Im struggling to find a way to get the properties Override & Justification available outside of the function. The code is:

 self.CasOverridesViewModel = ko.observable(self.CasOverridesViewModel);

 var hasOverrides = typeof self.CasOverridesViewModel === typeof(Function);

    if (hasOverrides) {
        self.setupOverrides = function() {
            var extendViewModel = function(obj, extend) {
                for (var property in obj) {
                    if (obj.hasOwnProperty(property)) {
                        extend(obj[property]);
                    }
                }
            };

            extendViewModel(self.CasOverridesViewModel(), function(item) {

                item.isOverrideFilledIn = ko.computed( function() {
                    var result = false;

                    if (!!item.Override()) {
                        result = true;
                    }

                    return result;
                });

                if (item) {
                    item.isJustificationMissing = ko.computed(function() {
                        var override = item.Override();
                        var result = false;
                        
                        if (!!override) {
                            result = !item.hasAtleastNineWords();
                        }

                        return result;
                    });

                    item.hasAtleastNineWords = ko.computed(function() {
                        var justification = item.Justification(),
                            moreThanNineWords = false;

                        if (justification != null) {
                            moreThanNineWords = justification.trim().split(/\s+/).length > 9;
                        } 

                        return moreThanNineWords;
                    });

                    item.isValid = ko.computed(function() {
                        return (!item.isJustificationMissing());
                    });
                }
            });
        }();
    }

I've tried it by setting up a global variable like:

var item;
or
var obj;

if(hasOverrides) {...

So the thing that gets me the most that im not able to grasp how the connection is made between the underlying model CasOverridesviewModel. As i assumed that self.CasOverridesViewModel.Override() would be able to fetch the data that is written on the screen.

Another try i did was var override = ko.observable(self.CasOverridesViewModel.Override()), which led to js typeError as you cannot read from an undefined object.

So if anyone is able to give me some guidance on how to get the fields from an input field available outside of this function. It would be deeply appreciated. If I need to clarify some aspects do not hesitate to ask.

The upmost gratitude!

Answer 1

not sure how far outside you wanted to go with your variable but if you just define your global var at root level but only add to it at the moment your inner variable gets a value, you won't get the error of setting undefined.

 var root = { override: ko.observable() }; root.override.subscribe((val) => console.log(val)); var ViewModel = function () { var self = this; self.override = ko.observable(); self.override.subscribe((val) => root.override(val)); self.load = function () { self.override(true); }; self.load(); }; ko.applyBindings(new ViewModel());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>