我正在尝试使用 Backbone.js 来简化数据 (JSON) 管理以及与 DOM 的交互。
首先，我不确定 Backbone.js 是否确实可以简化和改进当前流程，但我想假设它可以。
之前我使用 jQuery AJAX 函数检索数据。现在，我正在将数据(仍然使用 AJAX)Backbone 样式检索到 Backbone 模型中。
对于更新，之前我通过解析 JSON 对象本身来更新数据。然后我会将更新后的 json 发送回后端(就像我收到的一样)。
现在，是否可以使用 Backbone 中的 set 函数来简化如下内容，并且理想情况下应该在哪里构造 set 属性行为(以及所有其他 UI 绑定(bind)，如更改事件)？它会在 View 初始值设定项中的 fetch() 成功处理程序上吗？
function setBucketOffer(bucketName, newId) {
var segments = json.segments;
for (var i = 0; i < segments.length; i++) {
if (segments[i].market.toLowerCase() === g_market) {
var genders = segments[i].gender;
for (var i = 0; i < genders.length; i++) {
if (genders[i].name.toLowerCase() === g_segment) {
var buckets = genders[i].buckets;
for (var i = 0; i < buckets.length; i++) {
if (buckets[i].name === bucketName) {
buckets[i].confirm = newId;
return;
}
}
}
}
}
}
}
JSON 示例
{
"segments": [
{
"market": "Market1",
"gender": [
{
"name": "male",
"buckets": [
{
"name": "Market1_M_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": ""
},
{
"name": "Market1_M_North",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": ""
}
]
},
{
"name": "female",
"buckets": [
{
"name": "Market1_F_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
}
]
}
]
},
{
"market": "Market2",
"gender": [
{
"name": "male",
"buckets": [
{
"name": "Market2_M_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
},
{
"name": "Market2_M_North",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
},
{
"name": "Market2_M_South",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
}
]
}
]
}
]
}
编辑 1
从这里开始，我尝试充分利用 Parse 并从 JSON 中获取片段:
var Offers = Backbone.Collection.extend({
url: 'URL',
parse: function (response) {
return response.segments;
}
});
在这里，我得到的不仅仅是response.segments。也不确定使用渲染函数或获取成功函数来填充 DOM 是否适合我。假设我在 DOM 中有我的 html 模板...我想使用 jQuery clone() 克隆它，并使用段上的 forEach 填充克隆，然后将所有克隆推回到 html 主体中。这在 Backbone 中可行吗？你会怎么做？ (我可以在没有backbone.js的情况下做到这一点，但我想看看如何使用backbone.js进行改进，并将克隆上的所有数据绑定(bind)到模型更改)
var OfferView = Backbone.View.extend({
initialize: function () {
this.model = new Offers();
this.model.fetch({
success: function (collection, response) {
console.log(response);
}
});
this.model.on('change', this.modelChange);
this.model.on('change', this.render);
this.modelChange = function () {
alert('model changed');
};
},
render: function () {
}
});
编辑2
我准备通过 forEach 创建单独的 View ，但在将这些 View 插入回 DOM 时遇到问题。我究竟做错了什么？ (不确定返回这部分)
// DEFINE VIEW
var OfferView = Backbone.View.extend({
initialize: function () {
this.model = new Offers();
this.model.fetch();
this.model.on('change', this.modelChange);
this.model.on('change', this.render);
this.modelChange = function () {
alert('model changed');
};
this.render();
},
render: function () {
var self = this;
this.model.forEach(function (s) {
var view = new OfferMarketView({
id: "container" + s.get('name').toLowerCase().replace(/\s*/g, '')
});
$('#leftCol').append(view.el);
});
return this;
}
});
var OfferMarketView = Backbone.View.extend({
tagName: "div",
className: "marketContainer",
events: {},
render: function() {
}
});
最佳答案
每当您在模型上调用 fetch 时，响应都会通过可以在模型中定义的 parse 方法传递。 parse 采用一个参数，即 ajax 响应:
parse: function(response) {
}
在该函数中，您可以对从 ajax 请求返回的数据执行任何操作，并最终返回该对象。 parse 方法返回的对象将在您的模型上设置。
对于事件绑定(bind)，您需要在 View 中执行此操作。在 View 的初始化方法中，您可以执行以下操作:
this.collection.on("change", this.someFunction);
现在，只要有什么事情导致该模型触发其更改事件，someFunction(也在您的 View 中定义)就会运行。
编辑
您添加到问题中的示例 json 看起来非常标准化。有了这些数据，我会将其提取到一个集合中。如果这就是您希望模型具有的结构，那么您不需要进行太多解析。
在您的集合文件中，如果您创建执行以下操作的解析方法:
parse: function(response) {
return response.segments;
}
当您在成功请求后调用提取 this.collection.fetch() 时，您的集合将填充模型，这些模型包含与您的响应结构相匹配的属性。
编辑2
您的绑定(bind)看起来没问题。
在这部分代码中:
this.collection.fetch({
success: function (model, attributes) {
initAll(attributes);
// populate ui with attributes from model
}
})
集合获取成功时传回的参数是(collection, response) collection是集合调用的结果以及this.集合最终将是。 response 是您的 ajax 请求的响应。
我不确定 initAll(attributes) 应该做什么。如果您添加像我上面发布的那样的解析方法，您的集合将包含一组具有每个段属性的模型。
此外，您可以将渲染绑定(bind)到更改事件，而不是在最后调用 this.render():
this.collection.on('change', this.render);
这样，只要您的集合发生更改，该 View 就会自动再次呈现，以便显示您的更改。
关于javascript - 使用 Backbone.js 设置我的模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9798036/