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

时间:2012-02-25 21:37:59

标签: asp.net-mvc json collections backbone.js models

好的,我知道这是一个很长的镜头。

我在后端使用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}

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

我可以编写各种循环来填充所有不同的集合,等等一旦数据到达但是没有更有效的方式来做这个吗?

2 个答案:

答案 0 :(得分:1)

在服务器上:

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以及Json.Encode帮助程序不可用的WebForms视图引擎,您可以直接使用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>

答案 1 :(得分: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()来完成您想要的任务。