Question

我是Backbone.js的新手，我一直关注this tutorial，我现在对本教程感到满意，接下来我想做的是，而不是像javascript中那样设置javascript中的值链接here.

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

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>

以下是我正在使用的文本tempalte

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

Answer 1

如果你正在学习tutsplus教程，你需要类似的东西：

(function ($) {

    var contacts = [];

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

} (jQuery));

这只是调用一个控制器动作，它返回类似于当前Person类中的JSON。然后，您只需使用此JSON填充视图模型。

具有良好信息的类似问题here

如果您需要更多信息或帮助，请告诉我们。）

Answer 2

首先，您必须在服务器层中构建RESTful JSON API。这意味着您需要所有这些HTTP请求的URL：

（动词）（哑剧型）解释
（GET）（application / json）url返回数组中的所有模型
（GET）（application / json）url/:id返回一个模型
（POST）url摘要 params ，在服务器中创建模型并以json格式返回创建的模型
（PUT）url/:id摘要 params ，更新服务器中的模型并以json格式返回更新的模型
（DELETE）url/:id消化 id param 并删除服务器中的模型

并且，为方便起见，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
});

此处您将被允许使用任何创建，更新并删除集合或模型中的Backbone命令。

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

2 个答案: