title: KnockoutJS - pushing object into observable array isn't databinding
body: <p>My view model is a game with scene and each scene have some messages.</p>
  
  <p>The view model was a plain JSON object that mapped to be observable with the mapping plugin. The whole app is working fine, all data binding and other features are working as accepted. but...</p>
  
  <p>I'm using drag and drop in order the add messages to scene so I've rendered empty messages at the side (not included in the scene messages array but as a stand alone object) and when dropping the dragged message I've took it pushed it to the scene messages observable array, and when I'm looking in my game object I can see that a new message has been added but there is no effect in the ui, lets say we started with 2 messages in the array and they rendered fine in the load of the app, now I have 3 messages in the array but only 2 are shown in the ui.</p>
  
  <p>Here are some pieces of the code:</p>
  
  <p>This is the drag and drop code -</p>
  
  <pre><code>(function () {
          var _dragged;
          ko.bindingHandlers.drag = {
              init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                  var dragElement = $(element);
                  var dragOptions = {
                      helper: 'clone',
                      appendTo: 'body',
                      revert: true,
                      revertDuration: 0,
                      start: function () {
                          _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                      },
                      cursor: 'default'
                  };
                  dragElement.draggable(dragOptions).disableSelection();
              }
          };
  
          ko.bindingHandlers.drop = {
              init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                  var dropElement = $(element);
                  var dropOptions = {
                      drop: function (event, ui) {
                          valueAccessor().value.push(ko.mapping.fromJS(_dragged));
                      }
                  };
                  dropElement.droppable(dropOptions);
              }
          };
      })();
  </code></pre>
  
  <p>This the messages foreach binding with the drop -</p>
  
  <pre><code>&lt;div id="sceneMessages" data-bind="foreach: game.ContentScenes()[0].ContentMessages(), drop: { value: game.ContentScenes()[0].ContentMessages() }"&gt;
      &lt;span data-bind="text: id"&gt;&lt;/span&gt;
      &lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the empty new messages with the drag  - </p>
  
  <pre><code>&lt;ul data-bind="foreach: messagesTypes"&gt;
      &lt;li data-bind="text: MessageType.name, drag: { value: $data }"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any idea what I'm doing worng? could it be because of the mapping plugin?! as I mentioned the new message is added to the array properly.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Actually, I've just realized that even a simple push without the drag and drop isn't working as accepted..</p>
  
  <p>the JSON from the server is looks something like that:  </p>
  
  <pre><code>"ContentScenes": [
  {
    "ContentMessages": [
      {
        "PrivateMessageType": null,
        "MessageType": {
          "id": 1,
          "name": "Public"
        },
        "id": 7,
        "scene_id": 3,
        "parent_id": null,
        "time_offset": null,
        "from": null,
        "to": null,
        "msg_type": 1,
        "is_system": true
      },
      {
        "PrivateMessageType": null,
        "MessageType": {
          "id": 1,
          "name": "Public"
        },
        "id": 8,
        "scene_id": 3,
        "parent_id": null,
        "time_offset": null,
        "from": null,
        "to": null,
        "msg_type": 1,
        "is_system": true
      }
    ],
    "ContentResources": [],
    "id": 3,
    "game_id": 28,
    "name": null,
    "discussion_duration": null,
    "break_duration": null,
    "vote_duration": null,
    "is_template": true
  },
  {
    "ContentDilemmaOptions": [],
    "ContentMessages": [],
    "ContentResources": [],
    "id": 4,
    "game_id": 28,
    "name": null,
    "discussion_duration": null,
    "break_duration": null,
    "vote_duration": null,
    "is_template": false
  }
  ],
  "id": 28,
  "mainImage": null,
  "sideImage": null,
  "description": "Game description",
  "name": "Game Name",
  "locale": null
  </code></pre>
  
  <p>And this JSON is mapped like this:</p>
  
  <pre><code> var Scene = function (data){
          ko.mapping.fromJS(data,{},this);
          this.isCurrent = function(){
              return pageOptions.queryString("scene") == this.id();
          };
          this.url = function(){
              return _url + this.id();
          };
      }
  
   var mappingOptions = {
          'ContentScenes':{
              create:function(options){
                  return new Scene(options.data);
              }
          },
          'ContentCharacters': {
              key: function(data) {
                  return ko.utils.unwrapObservable(data.id);
              }
          }
      }
  
   var _gameJson = {
  
          game: ko.mapping.fromJS(_jsonObject,mappingOptions)
   }
  
    ko.applyBindings(_gameJson);
  </code></pre>
  
  <p>So, any idea what I'm doing worng?</p>