asp.net mvc 4 - observableArray doesn't update in UI with require.js -

That's why I'm using the require.js and knockout.js together. I have a simple page that the user will collect.

Here is the code:

cshtml file:

  @section scripts {& lt; Script data-main = "../script/app/useramannate/appinvite" src = "../ script / Lib / Sure.JS" & gt; & Lt; / Script & gt; } & Lt; Div id = "usermanagement-invite-view" & gt; & Lt; P & gt; Enter all the users you want to invite to this account. You will be able to set permissions added to them. & Lt; / P & gt; & Lt; Span data-bind = "text: ktjson ($ data)" & gt; & Lt; / Span & gt; & Lt; Div data-bound = "foreach: invited user ()" & gt; & Lt; Div & gt; & Lt; Span data-bind = "text: first name" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Span data-bind = "text: last name" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Span data-bind = "text: email address" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = "text" placeholder = "first name" data-bound = "text: first name" class = "input" /> & Lt; Input type = "text" placeholder = "last name" data-bind = "text: last name" class = "input" /> & Lt; Input type = "email" placeholder = "email address" data-bind = "text: email address" class = "input" /> & Lt; Input type = "button" value = "invite" data-bind = "click: invite" class = "submit" /> & Lt; / Div & gt; & Lt; / Div & gt;   
 here is app.invite.js  
  requirejs.config ({"baseUrl": "../Scripts/app/usermanagement", "path ": {" App.invite ":" app.invite "," to ":" ../../lib/knockout-2.2.1 "," jquery ":" //ajax.googleapis.com/ajax/ Libs / jquery / 2.0.0 / jquery.min "," toastr ":" ../../lib/toastr "}}); // Load the main app module to start the application (["main.invite"], function (BS) {bs.run ();}); Here is the main invitation.js:  
  define (['' '' ',' inviteViewModel '], function (to, see invitation) ) {Var Run = function () {var vm = new invitationViewModel (); ko.applyBindings (vm, document.getElementById ('# usermanagement-invite-view'));}; return {run: run};});   
 Here is the invitation view Model:  
  Define ('invited viewmodel', ['jquery', 'ko', 'toastr', 'model. User '], function ($, to, toaster, user) {return function inviteViewModel () {var self = this; self.firstName = ko.observable (); self.lastName = ko.observable (); self.emailAddress = See (); self-sustained users = CO.obbsalere (); selfishness = function () {var newUser = new user (); new user; first name (self first name)); NewUser.lastName (self.lastName ()); NewUser.emailAddress (self.emailAddress ()); Self.invitedUsers (). Push (newUser); Console.log (self.invitedUsers ());}}}});   
 For some reason, when I call the invitation function, the code shows that I'm adding some collection, but the UI does not get updated. Here's what seems like when I do console.log it does not show value though  
   
 What am I doing?   
 
 
 You need to call directly  push   viewers ARRA tracks changes for you and updates the UI, so you do not need brackets:  
  self.invitedUsers.push (newUser);   
  
 
 Also see in pop,  push , shift, unshift, reverse, sort, splice  
 All these functions are equal to running the basic JavaScript array function on the built-in array, and then are informing listeners about the change:  
  myObservableArray.push ('some new value' )  adds a new item at the end of the array