Knockout和ASP.NET MVC多页面

时间:2015-01-03 14:09:10

标签: javascript c# asp.net asp.net-mvc knockout.js

我是淘汰赛的新手,在应用我的绑定和多个视图时,我无法弄清楚如何使用ASP.NET MVC进行最佳结构淘汰。我理解你如何在单页面应用程序中完成它。但我的应用程序包含多个服务器端控制器和多个视图。每个视图都可以拥有自己的淘汰视图模型。

何时以及如何应用绑定?我最后加载了所有的javascript,这意味着我无法内联调用我的viewmodels。

使用某种MasterViewModel然后在我的视图中使用with binding(这是我能提出的唯一解决方案)是一个好习惯吗?

2 个答案:

答案 0 :(得分:2)

是的,这是一个很好的做法,因为如果你试图为多个视图制作一个视图模型,一切看起来都很复杂,可读性就会丢失(纯粹取决于复杂程度)。

你必须尝试这样的事情才能使事情变得简单易懂

查看型号:

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"));

如果我记得很清楚,堆栈溢出中几乎没有相似的帖子你可以参考

答案 1 :(得分:1)

对于每个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; }
}

Knockout 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使用camel case,我将json.net改为序列化为camlecase。

如果您有一个类似于SPA的复杂页面(例如具有多个步骤的表单页面,实质上是具有多个视图状态的页面),您将使用一些MasterViewModel,如超酷所解释的那样。