2013-05-22 3 views
3

Я изучал различные вопросы о марионетке и не нашел то, что мне нужно, и надеялся, что кто-то может дать мне хороший совет и пару указателей. Я новичок в этом и просто хотите построить на шаблонный стартовый пакет, который я выбрал на GitHubНовое для конфигурации марионетки, маршрутизатора и контроллера

https://github.com/coombsj/RequireJS-BackboneJs-MarionetteJS-Bootstrap_Starter

Я хотел бы создать две вещи;

  1. Как создать маршруты & Конфигурация contoller для проекта, на который делается ссылка. См. Примеры, объясненные ниже.
  2. , используя тот же проект, на который ссылается, как включить или использовать jquery на странице шаблона, что-нибудь вроде документа страницы, чтобы показать окно предупреждения?

В нем есть структура навигации, а пара областей, которые я получаю, но кроме LandingView.html, навигация не загружает ни одной страницы в contentRegion.

Это, кажется, до сих пор созданных шаблонных страниц (рулей), я в порядке с ними, но стараюсь правильно создать маршруты и раздел контроллера.

на данный момент Router.js выглядит следующим образом

define(['marionette', 'app/Controller'], 
    function (marionette, Controller) { 
     'use strict'; 

     return marionette.AppRouter.extend({ 
      appRoutes: { 
       'test'  : 'testView', 
       '*action' : 'logAction' 
      }, 
      controller: Controller 
     }); 
    }); 

и Controller.js

define(['app/views/LandingView'], 
    function (LandingView) { 
     "use strict"; 

     return { 
      logAction: function (action) { 
       console.log(action); 
       S2C.content.show(new LandingView()); 
      } 
     }; 
    }); 

define(['app/views/testView'], 
    function (testView) { 
     "use strict"; 

     return { 
      testView: function (test) { 
       console.log(action); 
       S2C.content.show(new testView()); 
      } 
     }; 
    }); 

в LandingPage нагрузки нормально

LandingView .js

define(['marionette', 'tpl!app/views/_templates/LandingView.html'], 
    function (Marionette, template) { 
     "use strict"; 

     return Marionette.ItemView.extend({ 
      template: template() 

     }); 
    }); 

LandingView.html

<div style="background-color:#6CF"> 
<h2> 
    This is the home page 
</h2> 
</div> 

мой TestView не нагружает

testView.js

define(['marionette', 'tpl!app/views/_templates/testView.html'], 
    function (Marionette, template) { 
     "use strict"; 

     return Marionette.ItemView.extend({ 
      template: template() 
     }); 

    }); 

testView.html

<form class="form-inline" id="testForm" method="post" action="#"> 
    <div> 
     <input type="text" name="name" accesskey="s" size="30" 
       value=""/> 
     <input type="submit" value="Find"/> 
    </div> 
</form> 

Заранее спасибо за любую помощь. Майк

ответ

8

Вот несколько ресурсов, чтобы начать вас на марионетка пути:

Они должны установить вас на правильном пути.

Подробнее:

  • не использовать шаблоны, чтобы делать вещи, вы бы использовать взгляды или контроллеры, в зависимости от контекста. Например, в представлении вы можете объявить обработчик в объекте event, который запустит предупреждение (или запустит некоторый код jQuery), например, https://github.com/davidsulc/marionette-gentle-introduction/commit/d63ccd041aba74e972c0fa93264c45c47e6f2e6e
  • вы также можете иметь (например) библиотеки javascript, выполненные в представлении, когда они визуализации: https://github.com/davidsulc/marionette-gentle-introduction/commit/2f80a63fa79d4779e82b16845ec8f0871e5797c7 (см файла активы/JS/общий/views.js)
  • маршрутизаторов и контроллеры большой предмет, и они объясняются в глубине в пределах связанного образца

Что именно вы возникли проблемы с?

+0

большое спасибо за указатели, понравилось содержание книги. Хотя я должен признаться, что до сих пор не смог связать это с моим конкретным примером. – MichealB1969

+0

Я обновил свой ответ с дополнительной информацией, которая поможет вам решить вашу проблему. –

+0

большое спасибо за помощь и указатели, так как с диагнозом Parkinsons некоторые вещи не так просто, как раньше, а кривые обучения кажутся немного круче, но я бы хотел конвертировать один из моих существующих сайтов на основе запроса/js в более обоснованной и более простой в обслуживании и масштабировании базы, и решили, что я считаю, что это правильный подход, по крайней мере, попробовать доказательство концепции. Я опубликовал свой полный ответ в качестве нового комментария. Спасибо – MichealB1969

0

большое спасибо за помощь и указатели, поскольку с диагнозом Parkinsons некоторые вещи не приходят так же легко, как раньше, а кривые обучения кажутся немного круче, но я хотел бы преобразовать один из моих существующих запросов/js основанные на более обоснованной и более простой в обслуживании базе данных &, и решили, что я считаю, что это правильный подход, по крайней мере, для доказательства концепции.

Чтобы ответить на ваш вопрос, я просто пытаюсь использовать достойный шаблонный пример, который содержит основу, требующую jquery & bootstrap. Трудность заключается в том, что я не обязательно знаю хорошее из плохой отправной точки, теперь я купил вашу книгу и пару других, чтобы дать мне небольшое чтение или по крайней мере предоставить ориентир.

Я выбрал отправную точку из github, которая указала на квадрат требований, но, как упоминалось, не была уверена в хорошем плохом или уродливом, поэтому хотелось бы проследить его, чтобы хотя бы понять, как расширить поставляемый маршрутизатор & Файлы контроллера js - которые я понимаю, являются квинтэссенцией этого и нужно действительно вникать.

Пример https://github.com/coombsj/RequireJS-BackboneJs-MarionetteJS-Bootstrap_Starter загружает только одну страницу из ссылок навигации в примере, хотя, хотя в ней есть ссылки, ссылки на нее.

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

Надеюсь, это имеет смысл и еще раз большое спасибо.

+0

Основываясь на том, что вы хотите достичь, книга отличная ресурс. Он покрывает (или будет, когда это будет сделано) все эти точки, за исключением использования require.js. После прочтения книги у вас будет отличное представление о том, как различные части Marionette подходят друг другу (включая рефакторинг существующего кода javascript), и вам просто нужно будет адаптировать его для использования. Но даже до этого требуется полнофункциональное приложение. Спасибо за покупку книги! –

Смежные вопросы