Установка моей модели с помощью Backbone.js

Question

Я пытаюсь использовать Backbone.js для упрощения управления данными (JSON) и взаимодействия с DOM.

Во-первых, я не уверен, что Backbone.js действительно может упростить и улучшить текущий процесс, но я хотел бы предположить, что это возможно.

Ранее я получал данные с помощью функции jQuery AJAX. Теперь я извлекаю данные (все еще с AJAX) в стиле Backbone в модель Backbone.

Для обновления ранее я анализировал сам объект JSON для обновления данных. Затем я отправил бы обратно обновленный json на сервер (так же, как я его получил).

Теперь, возможно ли использовать функцию set в Backbone для упрощения чего-либо, подобного приведенному ниже, и в идеале где должно быть построено поведение атрибута set (и все другие привязки пользовательского интерфейса, такие как события изменения)? Будет ли это в обработчике fetch (), который находится в инициализаторе View?

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. Предположим, у меня есть HTML-шаблон в DOM ... Я хочу клонировать его с помощью jQuery clone (), заполнить клон с помощью forEach для сегментов и отодвинуть все клоны в html-тело. Это работоспособно в позвоночнике, как бы вы это сделали? (Я могу сделать это без backbone.js, но хотел бы посмотреть, как можно улучшить с помощью backbone.js и привязать все данные клонов к изменениям модели)

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, но у меня возникают проблемы с их вставкой обратно в 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, и в конечном итоге возвращать этот объект.Объект, возвращаемый методом синтаксического анализа, будет установлен в вашей модели.

Для привязки событий вы захотите сделать это в своем представлении.В методе инициализации вашего представления вы можете сделать что-то вроде:

this.collection.on("change", this.someFunction);

Теперь, когда что-то заставляет эту модель вызывать событие изменения someFunction (также определенное в вашем представлении), будет выполняться.

РЕДАКТИРОВАТЬ

Пример json, который вы добавили в вопрос, выглядит довольно нормализованным.С этими данными я собираю их в коллекцию.Если вы хотите, чтобы ваши модели выглядели так, как вам нужно, то вам не нужно много разбирать.

в файле коллекции, если вы создаете метод синтаксического анализа, который выполняет следующее:

parse: function(response) {
    return response.segments;
}

Когда вы вызываете выборку, this.collection.fetch() при успешном запросе, ваша коллекция будет заполнена моделями, которые содержат атрибуты в структуре, соответствующей вашему ответу.

РЕДАКТИРОВАТЬ 2

Ваша привязка выглядит нормально.

в этом разделе кода:

this.collection.fetch({
    success: function (model, attributes) {
        initAll(attributes);

        // populate ui with attributes from model
    }
})

Параметры, которые возвращаются при успехе в выборке коллекции: (collection, response) collectionэто результат вызова коллекции и то, что this.collection в конечном итоге будет.response - ответ на ваш запрос ajax.

Я не уверен, что initAll(attributes) должен делать.Если вы добавите метод разбора, как я опубликовал выше, ваша коллекция будет содержать набор моделей с атрибутами каждого сегмента.

Кроме того, вместо того, чтобы вызывать this.render() в конце, вы можете выполнить рендеринг привязки ксобытие изменения:

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

Таким образом, каждый раз, когда ваша коллекция изменяется, этот вид будет автоматически отображаться снова, чтобы ваши изменения отображались.