淘汰赛和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。