如何将数据从服务器绑定到Backbone.js的模型

How to bind data from server to Backbone.js's model

本文关键字:Backbone js 模型 绑定 服务器 数据      更新时间:2023-09-26

我是 Backbone 的新手.js,我一直在遵循本教程,现在我对本教程感到满意,接下来我想做的是,而不是像此处链接所示的那样从 javascript 中设置值。

我想从服务器端传递值,我为此编写了以下代码,

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string City { get; set; }
}
List<Person> people = new List<Person>()
  {
      new Person(){Id = 1, FirstName = "Yasser", LastName = "Shaikh", City = "Mumbai"},
      new Person(){Id = 2, FirstName = "Adam", LastName = "Gilchrist", City = "Melbourne"},
      new Person(){Id = 3, FirstName = "MS", LastName = "Dhoni", City = "Ranchi"},
      new Person(){Id = 4, FirstName = "A", LastName = "Nesta", City = "Milan"},
  };
  public ActionResult GetTemplateData()
    {
        var jsonData = new
                       {
                       rows = (from m in people select new {
                               id = m.Id  ,
                               cell = new object[]
                                          {
                                              m.FirstName,
                                              m.LastName,
                                              m.City
                                          }
                               }).ToArray()
                       };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

为此,我正在尝试使用url属性,但我只是无法理解如何做到这一点。

请有人指导我得到这个。谢谢!

更新 1 :

正在使用以下javascript,请看一下,我已经尝试了您建议的更改..请帮助我解决此问题

<script type="text/javascript">
$(document).ready(function () {
    // data
    var contacts = [];
    $.getJSON("@Url.Action("TemplateDemo2", "Home")", function(data){
        contacts = data.rows;
    });
    // Model
    var Contact = Backbone.Model.extend({
        url:"@Url.Action("TemplateDemo2", "Home")"
    });
    // Collection
    var Directory = Backbone.Collection.extend({
        model: Contact
    });
    // Individual contact view
    var ContactView = Backbone.View.extend({
        tagName: "div",
        className: "contact-container",
        template: $("#contactTemplate").html(),
        render: function () {
            var tmpl = _.template(this.template);
            $(this.el).html(tmpl(this.model.toJSON()));
            return this;
        }
    });
    // Master View
    var DirectoryView = Backbone.View.extend({
        el: $("#contacts"),
        initialize: function () {
            this.collection = new Directory(contacts);
            this.render();
        },
        render: function () {
            var that = this;
            _.each(this.collection.models, function (item) {
                that.renderContact(item);
            }, this);
        },
        renderContact: function (item) {
            var contactView = new ContactView({
                model: item
            });
            this.$el.append(contactView.render().el);
        }
    });
    // Instance
    var directory = new DirectoryView();
});
 </script>

下面是我正在使用的文本临时

<script id="contactTemplate" type="text/template">
<div class="cc">
<h1><%= name %></h1>
</div>
</script>

首先,您必须在服务器层中构建一个 RESTful JSON api。这意味着您需要所有这些 HTTP 请求的 url:

  • (动词)(哑剧型)解释
  • (GET) (application/json) url返回数组中的所有模型
  • (GET) (application/json) url/:id返回一个模型
  • (POST) url消化参数,在服务器中创建一个模型并以 JSON 格式返回创建的模型
  • (PUT) url/:id消化参数,更新服务器中的模型并以 json 格式返回更新的模型
  • (删除)消化 id 参数并删除服务器中的模型url/:id

而且,为了方便起见,url必须始终相同。服务器必须通过http-verb + existence(or not) of id param识别不同的操作。

一旦你有了这个,你只需要在你的模型中定义这个url,就像这样:

var MyModel = Backbone.Model.extend({
  url: <the url>
});

而你的收藏是这样的:

var MyCollection = Backbone.Collection.extend({
  model: MyModel
});

从这里开始,您将被允许使用集合或模型中的任何创建更新和删除主干命令。

如果您正在遵循 tutsplus 教程,您将需要类似于以下内容的内容:

(function ($) {
    var contacts = [];
    $.getJSON"/YourControllerName/GetTemplateData", function(data){
        contacts = data.rows;
    });
} (jQuery));

这只是调用一个控制器操作,该操作返回类似于您当前在 Person 类中拥有的 JSON。然后,您只需使用此 JSON 填充视图模型。

这里有一个类似的问题,有很好的信息

如果您需要更多信息或帮助,请告诉我:)