javascript - 使用 Backbone.js 设置我的模型

Question

我正在尝试使用 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() {
    }
});

Answer 1

每当您在模型上调用 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. collection 将最终成为。 response 是您的 ajax 请求的响应。

我不确定 initAll(attributes) 应该做什么。如果您像我在上面发布的那样添加一个解析方法，您的集合将包含一组具有每个段属性的模型。

此外，您可以将渲染绑定(bind)到更改事件，而不是在最后调用 this.render():

this.collection.on('change', this.render);

这样，每当您的收藏发生变化时，该 View 将自动再次呈现，以便您的更改显示出来。