2

我是 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>
4

2 回答 2

1

如果您正在学习 tutsplus 教程，您将需要类似以下内容：

(function ($) {

    var contacts = [];

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

} (jQuery));

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

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

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

于 2012-08-13T12:30:44.580 回答
1

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

  • （动词）（哑剧式）解释
  • (GET) (application/json)url返回数组中的所有模型
  • (GET) (application/json)url/:id返回一个模型
  • (POST)url消化参数，在服务器中创建模型并以 json 格式返回创建的模型
  • (PUT)url/:id消化参数，更新服务器中的模型并以 json 格式返回更新后的模型
  • (DELETE)url/:id消化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
});

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

于 2012-08-13T12:40:45.453 回答