2013-12-16 53 views
0

令我瘋狂......我在這裏查了很多與我的問題相關的帖子,但仍然無法解決我的問題。 簡而言之: 我使用'$ .Ajax.BeginForm'來更新我的模型observableArray。數據在那裏,表被更新,但是,當我檢查數組的長度時,它保持爲0!我在這裏錯過了什麼?ObservableArray.length保持爲0.敲除

這裏是數據:

視圖模型:

<script type="text/javascript"> 
     //VIEW MODEL DECLARATION: 
     var ViewModel = { 
      SubscriberEmail: ko.observable(""), 
      SubscriberLists: ko.observableArray([]), 
      UnsubscribeAll: ko.observable(false), 
      UpdateSubscriberLists: function() 
      { 
       $.ajax("/Home/UpdateSubscriptionInfo/", { 
        data: ko.toJSON({ lists: this.SubscriberLists }), 
        type: "post", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (data) 
        { 
         $().toastmessage('showNoticeToast', data); 
        } 
       }); 
      }, 
      ProcessUnsubscribeAll: function() { 
       if (this.UnsubscribeAll) 
       { 
        alert('changing'); 
        alert(ViewModel.SubscriberLists().length); 
        ko.utils.arrayForEach(ViewModel.SubscriberLists(), function (item) 
        { 
         alert("changing OptIn"); 
         //item.OptIn = false; 
        }); 
       }; 
      } 
     }; 

     //UTILITY FUNCTIONS: 
     function DisplayMessage(data) 
     { 
      $().toastmessage('showNoticeToast', data); 
     } 
     function ProcessListsReceived(data) 
     { 
      ViewModel.SubscriberLists(ko.mapping.fromJSON(data)); 
     } 

     //ON DOCUMENT LOADED: 
     $(document).ready(function() 
     { 
      ko.applyBindings(ViewModel); 
     }); 
    </script> 

部分,對於更新的要求:

<div class="navbar-right form-inline" style="margin-top: 10px;"> 
       @using (Ajax.BeginForm("GetSubscriptionInfo", 
             new AjaxOptions 
              { 
               HttpMethod = "POST", 
               OnSuccess = "ProcessListsReceived" 
              })) 
       { 
        <div class="form-group"> 
         <span class="glyphicon glyphicon-search">&nbsp;</span> 
         <label class="sr-only" for="inputemail">Email address</label> 
         <input data-bind="text:SubscriberEmail" type="email" class="form-control input-sm" id="inputemail" name="inputemail" placeholder="Enter your email" style="width: 300px;"> 
        </div> 
        <button type="submit" class="btn btn-default input-sm btn-primary" data-loading-text="Loading...">Get my subscriptions</button> 
       } 
      </div> 

,更新上述在Javascript節宣佈觀測到陣列的功能 -

function ProcessListsReceived(data) 
      { 
       ViewModel.SubscriberLists(ko.mapping.fromJSON(data)); 
      } 

我已綁定到所述陣列的長度的按鈕..它總是保持禁用:

<button data-bind="click: UpdateSubscriberLists, enable: SubscriberLists().length > 0" type="button" class="btn btn-warning">Update subscription</button> 

SO ....爲什麼更新後的陣列長度爲0?感謝您的任何提示!

AL

回答

0

OK,似乎「ko.mapping.fromJSON」沒有更新我的數組的長度在我的情況... 重寫代碼德做實際推的伎倆和我的數組反映正確數量的元素。

所以不是:

function ProcessListsReceived(data) 
      { 
       ViewModel.SubscriberLists(ko.mapping.fromJSON(data)); 
      } 

我宣佈:

var SubscriberList = function (id,name,desc,optin) { 
      this.ListID = ko.observable(id); 
      this.ListName = ko.observable(name); 
      this.ListDescription = ko.observable(desc); 
      this.OptIn = ko.observable(optin); 
     }; 

,並改寫了功能:

function ProcessListsReceived(data) { 
      $(jQuery.parseJSON(data)).each(function() 
      { 
       ViewModel.SubscriberLists.push(new SubscriberList(this.ListID, this.ListName, this.ListDescription, this.OptIn)); 
      }); 
     } 

現在它的工作原理。謝謝, Al