Инициализация содержимого knockoutjs в дочерней jquery mobile page

Question

Я знаю, что есть много вопросов, которые охватывают интеграцию jquery mobile/knockoutjs, однако я не смог найти нить, которая решила мою проблему. У меня есть модель представления мастер, который содержит вид ребенка модели, и поэтому я инициализировать это на странице загрузки, поскольку это событие только обстреливали приложения нагрузки:

var viewModel = null; 

$(function() { 
    console.debug("running init"); 
    viewModel = new ViewModel(); 
    ko.applyBindings(viewModel); 
}); 

Это прекрасно работает на первой странице моего приложения, однако когда я перехожу на дочернюю страницу, содержимое knockoutjs не появляется, потому что jquery mobile загружает html динамически, а нокаут не знает, обновлять связанный контент. Я пытаюсь сказать, чтобы он динамически обновлялся с помощью функции $(document).delegate, однако я боюсь того, как она должна быть реализована.

<ul id="speeding" data-role="listview" data-bind="foreach: speeding.items"> 
    <li> 
     <h3 class="ui-li-heading" data-bind="text: Address"></h3> 
     <p class="ui-li-desc" data-bind="text: Address2"></p> 
     <p class="ui-li-desc" data-bind="text: PrettyDate"></p> 
     <p class="ui-li-aside" data-bind="text: SpeedMph"></p> 
    </li> 

    <script type="text/javascript"> 
     var loaded = false; 
     $(document).delegate("#page-speeding", "pagebeforecreate", function() { 
      if (!loaded) { 
       loaded = true; 
       ko.applyBindings(viewModel); 
      } 
      else { 
       $("#speeding").trigger("refresh"); 
      } 
     }); 
    </script> 
</ul> 

Я помещаю функции делегата в пределах страницы его называют на, по-видимому, как это требование с помощью делегата. Затем при первой загрузке этой дочерней страницы я вызываю ko.applyBindings (я только хотел вызвать это при загрузке приложения, но я не смог получить триггер («создать») для работы. При последующих вызовах он вызывал бы trigger («refresh») (что не работает для меня.) Проблема заключается в том, что функция делегата добавляется каждый раз, когда я перехожу на дочернюю страницу. Поэтому при первой загрузке дочерней страницы он будет вызывать функцию обратного вызова делегата один раз. вернуться на главную страницу, а затем обратно на страницу ребенка, он будет вызывать делегат обратного вызова дважды, и так далее.

Может кто-то пожалуйста, дать указания рекомендуемого подхода к обновив knockoutjs привязок на дочерних страниц?

Answer 1

Это то, что в конечном итоге работает для меня. Я понятия не имею, есть ли лучший способ или нет ...

var viewModel = null; 

$(function() { 
    console.debug("running init"); 
    viewModel = new ViewModel(); 
    ko.applyBindings(viewModel); 

    var pages = [ 
     "scorecard", "speeding", "leaderboard" 
    ]; 
    _.each(pages, function (page) { 
     $(document).on("pagebeforecreate", "#page-" + page, function() { 
      console.debug("applying " + page + " bindings"); 
      ko.applyBindings(viewModel, $("#page-" + page)[0]); 
     }); 
    }); 
});