Сочетание jQuery UI и HotTowel

Question

Я немного возвращаюсь к веб-разработке после того, как в течение последних 10 лет я был в некотором роде, и я поражен всеми новыми технологиями, которые мне приходится догонять, ASP.NET, MVC, jQuery, SPA, Knockout и т. Д. Я не знаю второй вещи о jQuery, и мой опыт работы с ASP.NET очень ограничен. Я немного знаком с ASP.NET WebForms, но MVC (и все остальное) для меня совершенно новое.

Посмотрев, сколько было технологий, и не зная, какой путь исследовать в моем новом проекте, я увидел, что Hot Towel - это шаблон, который объединяет все самые последние вещи в один красивый пакет, поэтому я решил получить шаблон Hot Towel. и запустить ASP.NET MVC4 SPA проект с ним.

Сейчас я пытаюсь интегрироваться с нашей внутренней структурой пользовательского интерфейса (которая развивалась без меня в течение последних нескольких лет). Я решил попробовать обновить страницу "Подробности" в шаблоне "Горячее полотенце", чтобы иметь некоторое содержимое. Я добавил простой <span>и все хорошо. Но если я попытаюсь добавить то, что я понимаю, как компонент на основе jQuery-виджетов (?), Я ничего не получу. Даже для самого простого теста добавления контента через jQuery я ничего не получаю:

<section>
    <h2 class="page-title" data-bind="text: title"></h2>
    <span>Test this</span>
    <div id="testDiv"></div>
    <script type="text/javascript">
       $("#testDiv").append("Testing");
    </script>
</section>

Я вижу span, но не модифицированный div, И я не вижу никакого этого контента в источнике ("Просмотр источника") или консоли IE9 (неудивительно, учитывая природу SPA, но что мне с этим делать?). И Инспектор страниц Visual Studio кажется совершенно бесполезным (не может пройти через заставку).

Как правильно добавлять элементы в пользовательский интерфейс в модели HotTowel/jQuery/MVC/SPA/KockoutJS/Breeze/Durandal? Все эти новые рамки сводят меня с ума.

Отредактируйте еще некоторые детали: jQuery работает нормально, когда я перемещаю его на главную страницу SPA, но когда он у меня есть на странице "Подробности", он не работает. Я подозреваю, что это как-то связано с природой SPA этого приложения и тем, как содержимое альтернативных представлений доставляется не как целая страница, а как обновленное содержимое главной страницы.

Редактировать после дальнейшего исследования, я обнаружил существование модели представления под названием "деталь", которая, вероятно, связана с этим подробным кодом представления, который я разместил. Это код из модели представления:

define(['services/logger'], function (logger) {
    var title = 'Details';
    var vm = {
        activate: activate,
        title: title
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
});

Answer 1

Сценарий, вероятно, выполняется, но не может найти div. Чтобы исправить манипуляции с div, поместите свой код jquery в функцию и вызовите эту функцию, используя обратный вызов attach /positionComplete для duranadal 2.0 или обратный вызов viewAttached для durandal 1.x

1.x ссылка - https://github.com/BlueSpire/Durandal/blob/master/docs/1.2/Composition.html.md#view-attached

Ссылка 2.0 - http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/

  // in your detail view model, if using durandal 1.x
  define(['services/logger'], function (logger) {
    var title = 'Details';
    var vm = {
        activate: activate,
        title: title,
        viewAttached : function(view){
                      // view is the root element of your detail view and is passed in 
                      // by durandal
                       $(view).append("Testing");
                     }
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
  });

  // in your detail view model, if using durandal 2.0, you have two options
  define(['services/logger'], function (logger) {
    var title = 'Details';
    var vm = {
        activate: activate,
        title: title,
        attached : function(view, parent){
                       // view is the root element of your detail view
                       // and is passed in by durandal
                       $(view).append("Testing first method");
                     },
        compositionComplete: function(view, parent){
                       // view is the root element of your detail view
                       // and is passed in by durandal
                       $(view).append("Testing second method");
                     }
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
  });