Как правильно применять AJAX в паттерне «Модуль» на javascript?

Question

[saxer]

Здравствуйте, я начал изучать asp.net и как следствие это привело к необходимости изучения javascript и jquery. Наверное у всех в какой то момент возникает вопрос правильной организации кода и применению паттернов. Мне понравилась идея которая описана в этом посте: habrahabr.ru/post/218485
Если кратко, то каждая страница сайта разделяется на "модули" функционал каждого модуля описан в соответствующем ему js файле, так же нужно создать основной js файл в котором модули присутствующие на странице будут инициализироваться.
Т.е. имеем что то вроде этого:
App.js

var App = (function () {
    return {
        init: function () {
            // Инициализация модуля. В ней мы инициализируем все остальные модули на странице
            Collection.init();
        }
    }
})();

Collection.js

var Collection = (function () {
    var url = '/Management/NestablePartical/';
    var el = '.dd';

    return {
        //Инициализация модуля
        init: function () {
            // Получим данные с сервера
            console.log("Collection.js init");
            this.getData(url);
        },
        getData: function (urlData) {
            /*
            * Тут будет код ajax запроса на сервер, который в случае успеха сохранит результат в переменную res
            */
        $.ajax({
            url: url,
            contentType: 'application/html;charset=utf-8',
            type: 'GET',
            datatype: 'html'
        }).success(function (result) {
            //по идее в этом месте должен быть переход на render
        }).error(function (xhr, status) {
            alert(status);
        });
        },
        render: function (data) {
            /*
            * Тут будет код создания html разметки, с использованием вашего любимого шаблонизатора.
            * Допустим результирующая строка будет сохранена в переменную html
            */
            $(el).html(data);

            //И привяжем DOM события к нужным элементам модуля
            this.event();
        },
        event: function () {
            // Тут будут созданы события
        }
    }
})();

Предполагается что на основной странице нужно будет запустить основной скрипт:

<script type="text/javascript">
        $(document).ready(function () {
            App.init();
        });
    </script>

Проблема в том что автор не уточняет как он использует ajax , а я не могу понять как правильно работать с асинхронными запросами внутри объекта. Т.е. как при инициализации Collection сделать запрос на сервер получить данные и после получения этих данных передать их в render.

Answer 1

[Денис Инешин]

Есть еще парочка вариантов:

// передача this
    getData: function (urlData) {
        $.ajax({
            url: url,
            success: this.render.bind(this)
        });
    },
        
    // или же сохранение ссылки на this в переменной
    getData: function (urlData) {
        var self = this;
        
        $.ajax({
            url: url,
            success: function (result) {
                self.render(result);
            }
        });
    },
        
    render: function (data) {
        //
    }

Answer 2

[Сергей Мельников]

var Collection = (function () {
  var 
    url = '/Management/NestablePartical/',
    el = '.dd';

  function getData() {
    $.get(url, function(response) {
      render(response)
    });
  }

  function render(data) { /* ... */ }

  function event() { /* ... */ }

  function init() { /* ... */ }

  return {
    // возвращаем только те методы, которые нужны вне модуля
    init: init,
    getData: getData
  }
})();