骨干.js 从 asp.net mvc viewmodel 填充大型嵌套模型

Question

好吧，我知道这是一个远射。

我在后端使用 asp.net mvc。我将有一个动作，它将返回一个 json 视图模型，该视图模型将具有几个简单的属性以及对象和对象集合。比如

public class ViewModel
{
    public string Name {get;set;}
    public Person Person {get;set;}
    public IEnumerable<SleectListItem> UserTypes {get;set;}
}
public class Person
{
    public string FirstName {get;set;}
    public string LastName {get;set;}
    public int UserType {get;set;}
}

SelectListType 只是一个名称值对，上面有“Text”、“Value”和“Selected”属性

这个想法是有一个表单，您可以在其中通过填写名字、姓氏并从下拉列表中选择用户类型来创建一个人。

我想做的是拥有一组backbone.js模型，例如

app.MyViewModel=Backbone.Model.extend();
app.Person=Backbone.Model.extend();
app.SelectListItem=Backbone.Model.Extend();
app.UserTypes=Backbone.Collection.Extend({
  model:app.SelectListType
})

并且能够通过传入从服务器返回的 Json 来填充 MyViewModel，这将是这样的

{Name:'SomeName',
 Person:{
     FirstName:'Frank',
     lastName:'Jones'
 },
 UserTypes:[{Text:'Admin',
       Value:1,
       selected:false},
      {text:'peon',
      Value:2,
      selected:false}

这不是我所知道的传统方式。我想我应该对每个对象或其他东西进行一次调用，但我真的只想对服务器进行一次调用以获取我需要的所有数据，因为它已经在服务器上被收集和正确安排。

一旦数据到达，我可以编写各种循环来填充所有不同的集合等等，但是没有更有效的方法吗？

Answer 1

查看backbone-relational:

如果您设置了关系，您可以执行与该页面上的示例类似的操作：

paul = new Person({
id: 'person-1',
name: 'Paul',
user: { id: 'user-1', login: 'dude', email: 'me@gmail.com' }
});

// A User object is automatically created from the JSON; so 'login' returns 'dude'.
paul.get('user').get('login');

否则，您可以通过覆盖 MyViewModel 中的 parse() 和 toJSON() 来完成您想要的操作。

Answer 2

在服务器上：

public ActionResult Index()
{
    ViewModel model = ...
    return View(model);
}

在客户端：

@model ViewModel
<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
    // TODO: the model variable here will represent the 
    // structure you are looking for so you can hook it
    // up with backbone
</script>

如果您使用的是 ASP.NET MVC 2 和 WebForms 视图引擎，而 Json.Encode 助手不可用，您可以直接使用 JavaScriptSerializer 类：

<script type="text/javascript">
    var model = <%= new JavaScriptSerializer.Serialize(Model) %>;
    // TODO: the model variable here will represent the 
    // structure you are looking for so you can hook it
    // up with backbone
</script>