2012-09-24 43 views
0

我有一個視圖有三個viewmodels:種植者,分支和種植者列表。敲除錯誤? applyBindings不起作用(Asp.net mvc4 mobile)

有兩個按鈕,種植者和分支。 GrowerList取決於所選的分支。

該場景如下: 1.當用戶訪問該頁面時,會顯示分支列表(BranchList)。 (使用jQuery手機的列表視圖來顯示列表)。

  1. 用戶從BranchList

  2. 用戶可以點擊「種植者」按鈕,顯示種植者的列表,然後可以選擇種植者選擇一個分支。

  3. 當點擊「種植者」按鈕時,會顯示種植者列表(種植者列表)。種植者列表取決於選擇的分支ID。

種植者,分支和種植者列表,每個都有一個ViewModel。我做以下,顯示更新GrowerList:

 $("#btnGrower").click(function() { 
    ko.applyBindings(new GrowerListModel(), document.getElementById("divGrowerList")); 
    }); 

我的視圖模型爲GrowerList如下所示:

function MyGrower(data) { 
    this.Id = ko.observable(data.GrowerId); 
    this.name = ko.observable(data.GrowerName); 
    } 

    function MyGrowerListModel() { 
    // Data 
    var self = this; 
    self.growers = ko.observableArray([]); 

    //Load initial state from server and populate viewmodel 
    $.getJSON("Grower/GetGrowers", function (allData) { 
    var mappedUsers = $.map(allData, function (item) { return new MyGrower(item) }); 
    self.growers(mappedUsers); 
    }); 
    } 

,並在我綁定的值的地方:

<div id="divGrowerList"> 
      <ul data-bind="foreach: growers" data-role="listview" id="ulGrowerList"> 
       <li><a data-bind="attr: {id: Id}"><span data-bind="text: name" /></a></li> 
      </ul> 

    </div> 

問題是,儘管我通過Firebug看到正確的數據來自GetGrowers方法,但沒有任何內容顯示爲GrowerList,除了第一次當Grower按鈕被點擊。我究竟做錯了什麼?沒有javascript錯誤。

回答

0

您應該只有applyBindings一次用於視圖模型和視圖。通過再次調用它,事情就不會像你在這裏看到的那樣工作。

你應該做的是在初始加載時應用綁定一次並調用一個方法將growers設置爲新的數組值。使用knockout的綁定來處理點擊事件比在這裏混合jquery要容易得多。

<button data-bind="click: updateGrowers"></button> 
function MyGrowerListModel() { 
    // Data 
    var self = this; 
    self.growers = ko.observableArray([]); 

    self.updateGrowers = function() { 
     $.getJSON("Grower/GetGrowers", function (allData) { 
      var mappedUsers = $.map(allData, function (item) { return new MyGrower(item) }); 
      self.growers(mappedUsers); 
     }); 
    }; 

    //Load initial state from server and populate viewmodel 
    self.updateGrowers(); 
} 

然後,每次點擊按鈕將調用您的視圖模型的updateGrowers功能,這將反過來,更新陣列。

+0

感謝您的回覆。我對淘汰賽和jquery很陌生,而且我的javascript技能也很有限(談論最糟糕的組合!)。你能建議我應該如何構建我的ViewModels在這種情況下?再次感謝! – WhatsInAName

+0

爲了給你更多的細節,GrowerInfo(button),BranchInfo(button),GrowerList(listview)和BranchList(listview)都來自數據庫。當在GrowerList中選擇一個種植者時,應該通過從數據庫中再次獲取「GrowerInfo」對象來更新GrowerInfo,並且同樣發生在Branch和BranchList上。 GrowerList取決於BranchID(從BranchList中選擇分支),因此當選擇分支時,BranchInfo和GrowerList都會更改。我爲GrowerInfo,BranchInfo和GrowerList以及它們的點擊事件使用了3個viewmodels,爲每個div做applyBindings。請幫忙! – WhatsInAName