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

まず、サーバーレイヤーにRESTfulJSONAPIを構築する必要があります。つまり、これらすべてのHTTPリクエストにURLが必要です。

  • （動詞）（mime-type）説明
  • （GET）（application / json）url配列内のすべてのモデルを返します
  • （GET）（application / json）url/:id1つのモデルを返す
  • （POST）パラメータurlをダイジェストし、サーバーでモデルを作成し、作成したモデルをjson形式で返します
  • （PUT）パラメータurl/:idをダイジェストし、サーバー内のモデルを更新し、更新されたモデルをjson形式で返します
  • （DELETE）id paramurl/: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 に答える
1

tutsplusチュートリアルに従っている場合は、次のようなものが必要になります。

(function ($) {

    var contacts = [];

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

} (jQuery));

これは、現在Personクラスにあるものと同様のJSONを返すコントローラーアクションを呼び出すだけです。次に、ビューモデルにこのJSONを入力するだけです。

ここに良い情報がある同様の質問

さらに情報やヘルプが必要な場合はお知らせください:)

于 2012-08-13T12:30:44.580 に答える