Использование jquery-layout with meteor

Я новичок в метеор и jquery-макете.Использование jquery-layout with meteor

Я изо всех сил пытаюсь понять, как заставить эти два человека работать вместе. Я добавил пакеты jquery и jquery-layout. Я считаю, что мне нужно спросить макет jQuery для компоновки страницы на каком-то этапе, но когда? Если я сделаю это на странице HTML, я получаю сообщение «Ошибка инициализации макета UI/элемент центральной панели не существует./Центральная панель является обязательным элементом». Я думаю, это потому, что метеор еще не загрузил никаких шаблонов. Пример основан на приложении meteor default. Я добавил дополнительный шаблон для перехода на восточную панель. И вставлен в сценарий макета jQuery.

Итак, где, когда и как следует составлять мою страницу?

<head> 
    <title>Layouts</title> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('body').layout({ applyDemoStyles: true }); 
     }); 
    </script> 
    </head> 

    <body> 
    {{> navigation}} 
    {{> hello}} 
    </body> 

    <template name="navigation"> 
    <div class="ui-layout-east"> 
    <p>Navigation stuff here</p> 
    </div> 
    </template> 

    <template name="hello"> 
    <div class="ui-layout-north"> 
    <h1>Hello World!</h1> 
     {{greeting}} 
    <input type="button" value="Click" /> 
    </div> 
    </template>

источник

2013-04-16 Mike Wilson

просьба сообщить некоторые примеры кода для быстрых и точных ответов –

На самом деле эта проблема так же, как говорит ошибка: центр панель является обязательным элементом. Таким образом, вместо ui-layout-east и ui-layout-north, попробуйте ui-layout-east и ui-layout-center:

<template name="hello"> 
    <div class="ui-layout-center"> 
    <h1>Hello World!</h1> 
     {{greeting}} 
    <input type="button" value="Click" /> 
    </div> 
</template>

Кроме того, правильное место, чтобы инициализировать макет находится в пределах обработчика .rendered событиечрезвычайного шаблона. Поэтому попробуйте перестроить свой код таким образом, чтобы в приведенном ниже примере был один главный шаблон, например root, а затем введите код инициализации jQuery внутри Template.root.rendered (строка 2 файла .js ниже). Не ставьте JavaScript в <head> и не использовать $(document).ready:

layout.html (предполагая, что имена файлов по умолчанию)

<head> 
    <title>Layouts</title> 
</head> 

<body> 
    {{> root}} 
</body> 

<template name="root"> 
    {{> navigation}} 
    {{> hello}} 
</template> 

<template name="navigation"> 
    <div class="ui-layout-east"> 
    <p>Navigation stuff here</p> 
    </div> 
</template> 

<template name="hello"> 
    <div class="ui-layout-center"> 
    <h1>Hello World!</h1> 
     {{greeting}} 
    <input type="button" value="Click" /> 
    </div> 
</template>

layout.js

if (Meteor.isClient) { 
    Template.root.rendered = function() { 
    $('body').layout({ applyDemoStyles: true }); 
    }; 
}

источник

2013-04-21 17:22:29

Спасибо, что это было полезно, конечно, это показывает панели, но для меня они не изменяются/перетаскиваются. Это работало для вас? Я пробовал добавить jqueryui и использовать выпуск Blaze, но не повезло. Я не получаю никаких ошибок, поэтому мне сложно отлаживать это. –

Это было давно, я не помню. Я бы предложил попытаться объединить все элементы jQuery Layout в один и тот же шаблон, а не отдельные шаблоны выше ('navigation' и' hello') и посмотреть, исправляет ли это это, хотя я сомневаюсь, что это произойдет. Вы уверены, что скрипты загружены в правильном порядке? jQuery должен быть загружен самим Meteor, поэтому просто убедитесь, что пользовательский интерфейс jQuery и другие зависимости загружены в порядке до Layout. –

Спасибо, Джеффри, теперь он работает. Я начал загружать сначала пакет jqueryui (а не «jquery-ui») из атмосферы (используя «mrt add jqueryui»), а затем пакет макета, который поставляется с метеоритом (используя «mrt add jquery-layout»). Я предполагаю, что это проблема с загрузкой пакета, конечно, в рабочем макете появляется после ui в файле .meteor/packages. Спасибо, что нашли время, чтобы помочь! –

Использование jquery-layout with meteor

ответ

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