正確構造knockoutjs視圖模型和服務器調用

我是新來的淘汰賽，今天已經成功地將一些頁面綁定到了一些頁面上，還有一些ajax調用。這是有趣的東西！正確構造knockoutjs視圖模型和服務器調用

既然我有這些基本功能的工作，我需要考慮接下來會發生什麼。

局勢：

我有一個'設置'頁面上有4個選項卡。每個選項卡都會有一些輸入字段，基本的表單元素，但是所有這些元素都將通過knockout綁定，並且數據將使用asp.net WebApi和ajax來回訪問。

問題是，我如何構建當前的視圖模型，以確保當我開始集成頁面上的其他選項卡時，我沒有遇到一些障礙？

這是我目前的全視圖模型：

function UserSettingsViewModel(apiBaseUrl, userId) { 
var self = this; 
self.firstName = ko.observable(); 
self.lastName = ko.observable(); 
self.primaryEmail = ko.observable(); 
self.secondaryEmail = ko.observable(); 
self.addressCity = ko.observable(); 
self.addressPostalCode = ko.observable(); 
self.addressCounty = ko.observable(); 
self.addressCountry = ko.observable(); 

self.fullName = ko.computed(function() { 
    return self.firstName() + " " + self.lastName(); 
}, this); 

$.getJSON(apiBaseUrl + "?userId=" + userId, function (data) { 
    alert(JSON.stringify(data)); 
    self.firstName(data.FirstName); 
    self.lastName(data.LastName); 
    self.primaryEmail(data.PrimaryEmail); 
    self.secondaryEmail(data.SecondaryEmail); 
    self.addressCity(data.City); 
    self.addressPostalCode(data.PostalCode); 
    self.addressCounty(data.County); 
    self.addressCountry(data.Country); 
}); 

self.updateName = function() { 
    alert('in update name method!'); 
    $.ajax({ 
     type: "PUT", 
     contentType: "application/json; charset=utf-8", 
     url: apiBaseUrl + "?userId=" + userId, 
     data: ko.toJSON({ 
      UserGuid: userId, 
      FirstName: self.firstName(), 
      LastName: self.lastName(), 
      PrimaryEmail: self.primaryEmail(), 
      SecondaryEmail: self.secondaryEmail(), 
      City: self.addressCity(), 
      PostalCode: self.addressPostalCode(), 
      County: self.addressCounty(), 
      Country: self.addressCountry() 
     }), 
     dataType: "json", 
     success: function (msg) { 
      alert('Success'); 
     }, 
     error: function (err) { 
      alert('Error'); 
     } 
    }); 
}; 
}

並在視圖本身我做一點點：

ko.applyBindings(new UserSettingsViewModel('@Url.RouteUrl("DefaultApi", 
new { httproute = "httproute", controller = "Settings" })', userId));

同樣，我是一個初學者（沒碰過這個東西一年多了，我當時並不擅長）。

來源

2014-01-11 ledgeJumper

創建一個「頂級」ViewModel並製作它的單個選項卡ViewModels屬性。同時查看映射插件以減少構建和序列化各個ViewModel時涉及的重複且容易出錯的代碼量。

您的頂層虛擬機應包含一個observable，在您的設置頁面中由template綁定使用該綁定，爲每個選項卡的內容選擇合適的模板。

UPDATE

的「頂級」示例VM：

var vm={ 
    userSettings: new UserSettingsViewModel(...), 
    readPreferences: new ReadPreferencesViewModel(...), 
    sharePreferences: new SharePreferencesViewModel(...), 
    activeTab: ko.observable('user-settings') 
}; 
ko.applyBindings(vm);

凡userSettings，readPreferences和sharePreferences是虛擬機的各個選項卡，並activeTab指定模板標識用於當前 - 顯示標籤。

template綁定的敲除文檔非常好。

來源

2014-01-12 01:25:52 ebohlman

您能否詳細說明'頂級'虛擬機？我知道這個頁面本身需要大約2-3個viewmodels，就像我所需要的，所以這聽起來像我需要的。我需要查看模板綁定，淘汰賽的網站有一個體面的覆蓋面呢？任何推薦閱讀？ – ledgeJumper

正確構造knockoutjs視圖模型和服務器調用

回答

相關問題