如何将数据从服务器绑定到Backbone.js的模型
How to bind data from server to Backbone.js's model
我是 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 填充视图模型。
这里有一个类似的问题,有很好的信息
如果您需要更多信息或帮助,请告诉我:)
相关文章:
- backbone.js无法渲染视图
- 如何使用backbone.js从集合中获取模型名称
- Backbone.js restful json API design
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- Backbone.js micro templating
- FancyTree JS+Backbone.JS-将数据加载到FancyTree时出现问题
- Backbone.js将模型绑定到视图时出错
- minimy javascript是什么意思?Backbone.js
- Backbone.js视图中的多个模型
- 在哪里存储HTML模板以在Backbone.js中使用
- 带有jquery插件的backbone.js视图
- 在Backbone.js中为窗口对象指定变量
- 如何在Backbone.js中编写可重用的模型和视图
- Backbone.js批量更新集合
- 从模型传递id以查看Backbone.js
- Backbone.js中的名称间距
- 一种将Apache Thrift JS绑定与Backbone.JS一起使用的方法
- 在Backbone.js中将回调绑定到此
- Backbone.js ListenToOnce被调用两次
- 使用Backbone.js访问JSON响应的部分