淘汰賽和ASP.NET MVC多頁

Question

我是淘汰的新手，在應用綁定和多個視圖時，我不知道如何使用ASP.NET MVC最好地構造淘汰。 我了解您如何在單頁應用程序中做到這一點。 但是我的應用程序包含多個服務器端控制器和多個視圖。 每個視圖都可以擁有自己的剔除視圖模型。

我何時以及如何應用綁定？ 我最后加載了所有JavaScript，這意味着我無法內聯調用viewmodel。

使用某種MasterViewModel然后在我的視圖中使用with綁定是一個好習慣嗎（這是我唯一能想到的解決方案）？

Answer 1

是的，這是一個好習慣，因為如果您嘗試為多個視圖創建單個視圖模型，那么所有內容看起來都會很復雜，並且可讀性會下降（完全取決於復雜性）。

您必須嘗試類似的事情，以使事情變得易讀易懂

查看模型：

var MasterViewModel = {
    vm1 : new ViewModel1(),
    vm2 : new ViewModel2(),
    vm3 : new ViewModel3(),
    vm4 : new ViewModel4(),
}

ko.applyBindings(MasterViewModel);

僅需向ko.applybindings添加附加參數以區分哪個視圖屬於哪個視圖模型，另一種可行的方法就可以正常工作

例：

//view
<div id='viewmodel1'>
</div>
<div id='viewmodel2'>
</div>

var vm1 = function(){ //code}
var vm2 = function(){ //code}

ko.applyBindings(new vm1(), document.getElementById("viewmodel1"));
ko.applyBindings(new vm2(), document.getElementById("viewmodel2"));

如果我記得得足夠多，那么可以在堆棧溢出中找到一些類似的帖子

Answer 2

為每個ASP.NET視圖創建一個綁定到mvc視圖的ViewModel。 我將用ASP.NET MVC模型命名ViewModel。

ASP.NET MVC模型：

public class LoginViewModel
{
    [Required]
    [Display(Name = "Email")]
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

剔除ViewModel：

var LoginViewModel = function () {
    var self = this;

    self.email = ko.observable();
    self.password = ko.observable();
    self.rememberMe = ko.observable();

    self.login = function () {
        ...
    }
};

我通常使用ASP.NET捆綁包捆綁所有viewmodels .js，然后在每個MVC視圖中綁定Knockout視圖模型。

$(function() {
    ko.applyBindings(new LoginViewModel());
});

如果您需要在首次加載時從mvc模型中填充模型，我將使用json.net序列化為json，然后將其傳遞給ViewModel承包商：

var loginModel = '@JsonConvert.SerializeObject(Model)';

$(function() {
    ko.applyBindings(new LoginViewModel(loginModel));
});

然后在剔除ViewModel中，您可以從傳遞給承包商的模型中填充可觀察對象：

var LoginViewModel = function (loginModel) {
    var self = this;

    self.email = ko.observable(loginModel.email);
    self.password = ko.observable(loginModel.password);
    self.rememberMe = ko.observable(loginModel.rememberMe);

為了將駝峰式大小寫用於json，我將json.net更改為序列化為camlecase。

如果您具有類似於SPA的復雜頁面（例如，具有多個步驟的表單頁面，本質上是具有多個視圖狀態的頁面），則可以使用如super cool所述的MasterViewModel。