Представления перехода в javascript приложения на основе dojo

У меня есть два сценария, с которыми мне нужна помощь, и я подумал, что публикация их вместе окажется более ценной для меня и других зрителей.

Настраивать:

   Worklight 6.1
   dojo 1.9

Application:
   MainView.html  (Contains Body, and a transition Div, and NorthSouthView.js script reference)
   View1.html (Contains a single Div that displays and unordered list
   View2.html (Contains a single Div that Displays <p> data, and also plays audio)
   View3.html (Contains a single Div that Displays instructional information)

  application-descriptor  <mainFile> MainView.html </mainFile>

  All of the views are stored together in the application. There are no external http queries made by the application.  All view transitions are local to the application.

Сценарий №1:

   At application start the MainView.html  is invoked by worklight.  Anticipated format::

   <body>
      <div>
         <h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1> 
      </div>

      <div  id="TransitionViewDiv">

           /* Would like to load content of View1.html, View2.html, or View3.html here */

      </div>
     <script>SetView.js</script>
</body>

Description + Questions:

When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed.  (View1, View2, or View3).  The goal is to keep SSheader fixed at the top of the screen at all times. Only    TransitionViewDiv  would update.

Вопросы:

1) What coding approach can be used in SetView.js to load one of the 3 possible views into the TransitionViewDiv?.  I did findin dojo 1.9 specs an example using dojox/mobile/ViewController but I was not able to get the sample code to work as documented by dojo.

2) Is the approach of having the TransitionViewDiv necessary, or could View1, 2 or 3 be loaded without TransitionViewDiv?  Keep in mind that each view View1, 2, and 3  are defined as individual Div's.

Будем признательны за любые советы по реализации описанного выше подхода или приветствуем любые предложения по передовым методам выполнения перехода.

Сценарий №2:

Как продолжение сценария 1 выше. После успешной загрузки View1, 2 или 3 в представлениях будут определены кнопки, которые захотят вызвать переход к другому из оставшихся представлений. Итак, если внутри SetView.js решение состоит в том, чтобы скользить в View2 для отображения, View2 будет иметь кнопки, которые нужно будет загрузить, например, View3.html.

Описание + Вопросы:

1) Будет ли лучшим подходом для загрузки View3.html из View2.html использовать moveTo при нажатии кнопки, или кнопка должна использовать обратный вызов для вызова javascript, чтобы вызвать переход, аналогичный тому, который использовался для загрузки исходного представления?

Ценим любые советы по передовым методам управления несколькими представлениями, хранящимися в независимых файлах. В итоге приложение будет иметь более 15 файлов ViewXX.html, каждый из которых содержит элемент Div. Исходя из этого, наличие всех представлений в одном html-файле и принудительное скрытие и отображение невозможно.

Цените свое время и помогайте


person Michael Mirt    schedule 24.02.2014    source источник


Ответы (1)


Чтобы загрузить фрагмент HTML (View1.html, View2.html или View3.html), вы можете использовать dojox/mobile/ContentPane. Этот виджет позволяет указать свойство href, которое можно использовать для указания местоположения представления.

Вы также можете изменить его позже, снова установив свойство href, например:

registry.byId("myContentPane").set("href", "View2.html");

Вы должны сохранить div#TransitionViewDiv и программно добавить к нему dojox/mobile/ContentPane или использовать декларативный синтаксис и добавить следующие атрибуты:

 <div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>

Ваш второй сценарий отличается от первого. В первом у вас фактически 1 представление с много фрагментов, а во втором сценарии у вас много представлений.

Если у вас есть только 1 представление, вы не можете перейти к другим представлениям (их нет). Поэтому, если вы хотите использовать переходы, вы не можете использовать dojox/mobile/ContentPane.

Однако, если у вас есть отдельные представления, это означает, что вам нужно переместить заголовок в каждое представление (поскольку они являются его частью). В этих, более сложных случаях, я думаю, вам следует обратиться к dojox/app. модуль. Это охватывает большую часть кода MVC для вас, и единственное, что вам нужно сделать, это настроить его.

Если вас не интересует модуль dojox/app, вы можете попробовать наследовать представления. Возможно, вы захотите посмотреть на этот ответ Я когда-то предоставлял. В разделе комментариев этого ответа вы также можете найти более подробный JSFiddle. В этом примере заголовок фактически наследуется. Я также написал более подробную статью о этом случае .

person g00glen00b    schedule 24.02.2014
comment
Пожалуйста, игнорируйте предыдущий комментарий. Он неправильно отформатирован. Обновленный Commet: Сценарий № 1 завершен, в результате чего исправлен Div heaer, за которым следует ContentPane, а ContentPane содержит, скажем, View2.html, загруженный программно, как вы описали. View2.html — это Div с двумя кнопками на панели вкладок. Могу ли я использовать кнопку на панели вкладок для вызова js-файла, чтобы снова обновить TransitionViewDiv ContentPane href = View3.html и загрузить View3.html в ContentPane вместо View2.html? Возможен ли такой подход и является ли он хорошей практикой? Большое спасибо за вашу помощь, и советы. - person Michael Mirt; 24.02.2014
comment
Возможно. ContentPane также отображает ваши виджеты, просто определите свои события декларативно в своих отдельных представлениях. Но сам обработчик события (код JavaScript) должен быть загружен в MainView.html (JavaScript внутри представлений игнорируется ContentPane). - person g00glen00b; 24.02.2014
comment
Спасибо. Я ценю совет. Сейчас работаем над реализацией. - person Michael Mirt; 26.02.2014