負載數據MV3

Question

附文件的例子：http://jsfiddle.net/brux88/9fzG4/1/

喜， 我開始在一個asp.net MVC項目使用knockoutjs。

我有一個觀點：

<button data-bind='click: load'>Load</button> 


<table> 
      <thead> 
       <tr> 
        <th>Cliente</th> 
        <th>Colli</th> 
        <th>Tara</th> 
        <th>Peso Tara</th> 
        <th> </th> 
       </tr> 
      </thead> 
      <tbody data-bind='foreach: righe'> 
       <tr> 
        <td> 
         <select data-bind=" 
          value: selectedCli, 
          options: clienteList, 
          optionsText: function(item) { return item.Rscli + '-' + item.Codcli }, 
          optionsCaption: '--Seleziona un Cliente--'" 
          style=" width: 150px"> 
         </select> 
        </td> 
        <td > 
         <input data-bind='value: Ncolli' /> 
        </td> 

        <td> 
         <select data-bind="value: selectedTara, 
              options: taraList, 
              optionsText: function(item) { return item.Destara + 

'-' + item.Codtara}, 
         optionsCaption: '--Seleziona un Cliente--'" 

           style=" width: 150px"> 
         </select> 
        </td> 
        <td > 
         <input data-bind="value: Ptara" /> 
        </td> 


        <td> 
         <a href='#' data-bind='click: $parent.rimuoviRiga'>Elimina</a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <button data-bind='click: aggiungiRiga'>Aggiungi</button> 
     <button data-bind='click: salva'>Salva</button> 
     <button data-bind='click: annulla'>Annulla</button>​ 

我的結果從數據DB：

[{"Codcli":4,"Rscli":"antonio","Codtart":"1002","Despar":"ciliegino","Ncolli":10,"Pcolli":100,"Codtara":"03","Destara":"","Ptara":82,"Pnetto":18,"Prezzo":1},{"Codcli":1,"Rscli":"bruno","Codtart":"1001","Despar":"pomodoro","Ncolli":10,"Pcolli":100,"Codtara":"03","Destara":"","Ptara":10,"Pnetto":90,"Prezzo":1}] 

我的視圖模型knockoutjs：

 <script type="text/javascript"> 
    var listCli= [{Codcli: 1,Rscli: "Bruno"},{Codcli: 2,Rscli: "Pippo"},{Codcli: 3,Rscli: "Giacomo"}]; 
var listTa= [{Codtara: 01,Destara: "Plastica",Pertara:4},{Codtara: 02,Destara: "Legno",Pertara:6},{Codtara: 03,Destara: "Ploto",Pertara:8}]; 

var mydataserver = [{"Codcli":3,"Rscli":"Giacomo","Ncolli":10,"Codtara":"03","Destara":"Legno","Ptara":82},{"Codcli":1,"Rscli":"Bruno","Ncolli":10,"Codtara":"02","Destara":"Plastica","Ptara":10}]; 

var RigaOrdine = function() { 
    var self = this; 
       self.selectedCli = ko.observable(); 
       self.clienteList = ko.observableArray(listCli);    
       self.Ncolli = ko.observable(); 
       self.selectedTara = ko.observable(); 
       self.taraList = ko.observableArray(listTa); 
       self.Ptara = ko.observable(); 


       self.Ncolli.subscribe(function() { 
        self.Ptara(self.Ncolli() ? self.selectedTara().Pertara * self.Ncolli() : 0); 
       }); 



       self.selectedTara.subscribe(function() { 
        self.Ptara(self.Ncolli() ? self.selectedTara().Pertara * self.Ncolli() : self.selectedTara().Pertara); 
       }); 
      }; 


      var Ordine = function() { 
       var self = this; 
       self.righe = ko.observableArray([new RigaOrdine()]); // Put one line in by default 



       // Operations 
       self.aggiungiRiga = function() { 
        self.righe.push(new RigaOrdine()); 
         }; 
       self.rimuoviRiga = function (riga) { 
        self.righe.remove(riga); 
         }; 


       self.salva = function() { 
       var righe = $.map(self.righe(), function (riga) { 
         return riga.selectedCli() ? { 
          Codcli: riga.selectedCli().Codcli, 
          Rscli: riga.selectedCli().Rscli, 
          Ncolli: riga.Ncolli(), 
          Codtara: riga.selectedTara().Codtara, 
          Ptara: riga.Ptara(), 
          } : undefined; 
        }); 
        alert(ko.toJSON(righe)); 
        //save to server 
        /* $.ajax({ 
         url: "/echo/json/", 
         type: "POST", 
         data: ko.toJSON(righe), 
         dataType: "json", 
         contentType: "application/json; charset=utf-8", 
         success: function(data) { 
         } 
        });*/ 
        self.righe([new RigaOrdine()]); 
       }; 

       //load from server 
       self.load = function() { 
        $.ajax({ url: '/echo/json/', 
         accepts: "application/json", 

         cache: false, 
         statusCode: { 

         200: function (data) { 
          alert(ko.toJSON(mydataserver)); 
          //i do not know apply to viewmodel 
         }, 
         401: function (jqXHR, textStatus, errorThrown) { 
          alert('401: Unauthenticated'); 
         // self.location = "../../Account/Login.html?returnURL=/Index.html"; 
         } 
         } 
        }); 


       }; 
       self.annulla = function() { 
        self.righe([new RigaOrdine()]); 
       }; 



      }; 
      var viewmodel = new Ordine(); 
      ko.applyBindings(viewmodel); 


​ 

    </script> 

，如果我想從一個數據庫加載數據，我如何？而下拉列表

Answer 1

你的問題有點弱，所以我會給你一個更一般的答案。

要回答你關於如何從數據庫加載數據的問題，它看起來像你已經開始正確的軌道。通常你使用AJAX請求來執行數據的異步請求。要做到這一點，knockoutJS提供以下功能：

$.getJSON("/some/url", function(data) { 
    // Now use this data to update your view models, 
    // and Knockout will update your UI automatically 
}) 

來源：http://knockoutjs.com/documentation/json-data.html

在提供你將有機會從服務器返回的數據的回調。這取決於你的應用程序的邏輯你想在這裏做什麼 - 對於某些應用程序，它可能會更新視圖模型的狀態以在視圖中進行相應的更新。

如果您的問題更具體，請詳細說明。否則，我希望我能幫助你走上正軌。

Answer 2

正如我所看到的..你可能想要一些很好的實踐加載。 我會和你分享我的。

好吧..返回一個Json作爲JsonResult。

// POST: /Client/LoadClient 
    [HttpPost] 
    public JsonResult LoadClient(int? id) 
    { 
     if (id == null) return null; 

     var client = _business.FindById((int) id); 

     return Json(
      new 
      { 
       id = cliente.id, 
       name = cliente.name, 
       list = cliente.listOfSomething.Select(s => new {idItemFromList = s.idWhatever, nameItemFromList = s.nameWhatever}) 
      }); 

    } 

JS

viewmodel.Client.prototype.LoadClient= function (id) { 
var self = this; 

if (id == 0) { 
    return null; 
} 

$.ajax({ 
    url: actionURL("LoadClient", "Client"), 
    data: { id: parseInt(id) }, 
    dataType: "json", 
    success: function (result) { 
     if (result != null) 
      self.Load(result); 
    } 
}); 

Load方法。

viewmodel.Client.prototype.Load = function (result) { 
var self = this; 

self.idClient(result.id); 
self.nameCliente(result.name); 
self.ListOfSomething(result.list); 
}; 

和..

ko.applyBinding（yourModel）;

因爲你可以看到我正在使用原型這也是一個很好的做法。