Emberjs перейти на якорь из другого вида

Question

Emberjs перейти на якорь из другого вида

0

В настоящее время я использую проект ember cli для создания моего приложения ember, но у меня возникает проблема с настройкой моей навигации. Следующий блок кода работает на маршрутизаторе индекса, однако я столкнулся с проблемой на других моих маршрутизаторах. Раздел goToAnchor позволяет мне перемещаться по тегам привязки к страницам на одном бесконечном прокрутке, таком как домашняя страница, но когда я перехожу к другим представлениям, то есть к странице my/terms, мне нужно, чтобы меню можно было щелкнуть на домашней странице, в идеале без обновление браузера.

Возможно ли это без обновления?

Index Router:

export default Ember.Route.extend({
    actions: {
        goToAnchor: function(item,anchor) {
            var $elem, $scrollTo;
            $elem = $('#' + anchor);
            $scrollTo = $('body').animate({
                scrollTop: $elem.offset().top-15
            }, parseInt(ENV.CONFIG.PRODUCT.SCROLL_SPEED));
            this.transitionTo(item.route).then($scrollTo);
        }
    }
});

Навигация:

<section class="top-bar-section center">
    <ul class="nav-header">
        <li><a {{action goToAnchor 'index' 'menu1'}}>menu1</a></li>
        <li><a {{action goToAnchor 'index' 'menu2'}}>menu2</a></li>
        <li><a {{action goToAnchor 'index' 'menu3'}}>menu3</a></li>
        <li><a {{action goToAnchor 'index' 'menu4'}}>menu4</a></li>
    </ul>
</section>

Текущая настройка на момент публикации:

DEBUG: ------------------------------- 
DEBUG: Ember      : 1.5.1 
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery     : 2.1.1 
DEBUG: -------------------------------

Chris Hough 23 май 2014, в 05:24

Источник

0

Я не понимаю твою проблему. Простой jsfiddle может помочь
selvagsz 23 май 2014, в 07:01
0

это довольно сложно описать, но у меня есть индексное представление, где работают goToAnchors, однако в других представлениях, как мне сделать ссылку меню обратно на индексное представление?
Chris Hough 23 май 2014, в 07:14
0

Таким образом, вы нажимаете ссылку, чтобы перейти к представлению, но как работает новое меню, чтобы оно могло вернуться к дому с привязкой?
Chris Hough 23 май 2014, в 07:21
0

Если вы хотите перейти к любому маршруту из шаблонов руля, вы должны использовать помощника link-to ссылкам. emberjs.com/guides/templates/links
selvagsz 23 май 2014, в 07:29
0

Также посмотрите этот пост, чтобы сохранить позицию прокрутки. Reefpoints.dockyard.com/2014/05/05/…
selvagsz 23 май 2014, в 07:31
0

Если вышеупомянутые два не помогут вам, ясно, что я не рядом с вашей проблемой. Я рад помочь, если вы предоставите простую рабочую скрипку / jsbin.
selvagsz 23 май 2014, в 07:33
0

Завтра я настрою тестовое репо @selvagsz и опубликую ссылку здесь, это будет проще, чем jsfiddle. пока спасибо.
Chris Hough 23 май 2014, в 07:35
0

Звучит лучше :)
selvagsz 23 май 2014, в 07:37
0

хейя @selvagsz вот репо с тестовым кодом :: github.com/chrishough/embercli-emberjs-test Мысли?
Chris Hough 26 май 2014, в 02:07

Показать ещё 7 комментариев

Теги:

javascript

jquery

ember.js

ember-cli

1 ответ

Ещё вопросы

Я не понимаю твою проблему. Простой jsfiddle может помочь
это довольно сложно описать, но у меня есть индексное представление, где работают goToAnchors, однако в других представлениях, как мне сделать ссылку меню обратно на индексное представление?
Таким образом, вы нажимаете ссылку, чтобы перейти к представлению, но как работает новое меню, чтобы оно могло вернуться к дому с привязкой?
Если вы хотите перейти к любому маршруту из шаблонов руля, вы должны использовать помощника link-to ссылкам. emberjs.com/guides/templates/links
Также посмотрите этот пост, чтобы сохранить позицию прокрутки. Reefpoints.dockyard.com/2014/05/05/…
Если вышеупомянутые два не помогут вам, ясно, что я не рядом с вашей проблемой. Я рад помочь, если вы предоставите простую рабочую скрипку / jsbin.
Завтра я настрою тестовое репо @selvagsz и опубликую ссылку здесь, это будет проще, чем jsfiddle. пока спасибо.
хейя @selvagsz вот репо с тестовым кодом :: github.com/chrishough/embercli-emberjs-test Мысли?

selvagsz · Accepted Answer · 2014-05-26T15-24-00.000Z

Привет Крис, я только что просмотрел ваш код и смог определить gotchas

Ваш маршрут по страницам терминов является legal/tou. Когда вы нажимаете меню навигации со страницы условий, действие вызывается с помощью маршрутов legal/tou => application (child => parent hierarchy). Следовательно, Nothing handled in the action goToAnchor было брошено. Итак, первый шаг - переместить логику goToAnchor из маршрута index маршрут application.
Во-вторых, в действии goToAnchor вы пытаетесь запросить DOM до того, как шаблон будет обработан. Следовательно, он взрывается. Вам нужно запросить DOM после визуализации шаблона. Вы должны использовать очередь afterRender для Ember RunLoop. Чтобы узнать больше о Ember Runloops, обратитесь к документам здесь
```
//routes/application.js

export default Ember.Route.extend({
actions: {
 goToAnchor: function(route,anchor) {
    var $elem, $scrollTo;
    this.transitionTo(route).then(function() {
      Em.run.schedule('afterRender', function(){
        $elem = $('#' + anchor);
        $('html,body').animate({
            scrollTop: $elem.offset().top-15
        }, 500);              
      });
    });
  }
 }
});
```

это сработало отлично, я ценю это. Спасибо.