Knockout-arrays as global variables in javascript

Question

I probably show off my lack of skills with this one. But since I´m all for learning I´m willing to let pride go...

In my viewModel I define:

self.Tags() = ko.observableArray();
self.Skills() = ko.observableArray();

then I want to save my tags. I have created this function outside the viewModel where I do some processing:

function saveTags( category, mytagsArray) { ... }

I call 'saveTags( "skill", Skills)' from within the viewModel and get this error telling me self.Tags() is not a function.

Why am I not allow to refer self.Tags inside the function "saveTags"?

(And please do not say it should be LackOfSkills instead of Skills... ;)

Answer 1

try without the ()'s:

self.Tags = ko.observableArray();
self.Skills = ko.observableArray();

self.Tags = foo says to set the self.Tags to be foo. self.Tags() says that self.Tags in a function and you want to invoke it. Those are both legit statements. But self.Tags() = foo says self.Tags is a function you want to invoke and set it's value to foo... which doesn't make sense and isn't valid code in any language.

Answer 2

Here is a demo pen for you. Try defining your view model like this:

var tagsViewModel = {
    // data
    tagToAdd: ko.observable(""), // this is the new tag to add
    tags: ko.observableArray([]), //empty collection
    skills: ko.observableArray([]),

// behaviors
    addTag: function () {
        var newTag = { Name: this.tagToAdd() };
        this.tagToAdd("");

        tagsViewModel.tags.push(newTag)

    }
};

ko.applyBindings(tagsViewModel);

Define your html like this:

<input type="text" placeholder="Add New Tag" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown'" /> <button data-bind="click: addTag, enable: tagToAdd().length > 0" class="btn"><i class="icon-plus"></i> Add</button>

 <ul data-bind="foreach: tags" class="">
<!-- DEFINE UR LI HERE -->
</ul>

Answer 3

You can access your viewmodel by storing it in a variable like so:

function ViewModel() {
     self.Tags = ko.observableArray();
     self.Skills = ko.observableArray();
}
my = { viewModel: new ViewModel() };
ko.applyBindings(my.viewModel);

Then you just access my.Tags()

related answer

Answer 4

The problem here is that you assigning ko.observableArray(); to result of the call self.Tags(), and that is why your function is not stored in self.Tags variable. I guess the right code will look like:
in case you want assign the results of that calls:

self.Tags = ko.observableArray();
self.Skills = ko.observableArray();

in case you want assign the function links to call them later:

self.Tags = ko.observableArray;
self.Skills = ko.observableArray;
...
// somewhere later
self.Tags();