Nano Hash - криптовалюты, майнинг, программирование

динамически генерировать HTML-элементы DOM

Здесь я пытаюсь получить данные, хранящиеся в mongodb, через угловой контроллер в нефритовом шаблоне.

html
head
    script(src='/public/libs/angular.js')
    script(src='/public/libs/angular-route.js')
    script(src='/public/javascripts/processJson.js')   
body
      div(ng-app='app')
        div(ng-controller='MainController as main')
            div(ng-repeat='post in main.posts')     
                        {{post.type}}(id='{{post.id}}')
                        block content

----вот моя консоль mongodb----

[{"_id":"55dafdc56358955b3cf8a49e","id":"1","type":"div"}]

-----сгенерированный html----

  <html>
  <head>
  <script src="/public/libs/angular.js"></script>
  <script src="/public/libs/angular-route.js"></script>
  <script src="/public/javascripts/processJson.js">  </script>
   </head> 
<body>
<div ng-app="app" class="ng-scope">
<div ng-controller="MainController as main" class="ng-scope">
<div ng-repeat="post in main.posts" class="ng-binding ng-scope">    
  div(id='1')
 </div>
</div>
</body>
</html>

Проблема в том, что он не генерирует элемент div, как ожидалось.

24.08.2015

  • Справедливым и разумным аргументом будет здесь Зачем вообще использовать шаблоны на стороне сервера? так как, конечно, вы можете просто получить данные с конечной точки сервера и связать это в angular, чтобы просто ng-повторить все, что требуется . Как правило, это основное внимание фреймворка. 24.08.2015
  • @BlakesSeven, хотя я не могу ответить на этот вопрос для OP, и я также не защищаю необходимость здесь, шаблоны на стороне сервера часто используются для оптимизации SEO. 24.08.2015
  • Проблема в том, что {{post.type}} будет распечатывать только строку div, а не создавать фактический элемент. Для этого OP понадобится директива и некоторые методы DOM. 24.08.2015
  • У меня нет большого опыта работы с Jade, но вы ожидаете, что {{post.type}}(id='{{post.id}}') будет выполняться на стороне сервера? 24.08.2015
  • @MichaelPerrenoud да, это именно то, что я хотел! 24.08.2015
  • @MichaelPerrenoud На самом деле для этого существуют гораздо более современные методы, такие как, в основном, направление всех запросов сканера на прокси-агент, который является JavaScript и, следовательно, подкован в инфраструктуре для отображения контента для запроса. Но это, как правило, отклоняется от темы заданного вопроса. Проблема заключается в привязке данных, когда часть работы выполняется на сервере, а часть — на клиенте. 24.08.2015

Ответы:


1

Я пытаюсь получить данные, хранящиеся в mongodb, через контроллер angular в шаблоне jade.

Проблема, с которой вы столкнулись, заключается в том, что вы не можете напрямую получить доступ к mongodb через angular. MongoDB работает на сервере, тогда как Angular работает на клиенте. Если вы специально не создаете определенные маршруты или механизмы, вы не сможете соединить их, просто используя Jade.

Цель Jade — создать файл HTML из файлов .jade, что делается на самом сервере. Любые переменные, которые вы используете в синтаксисе Jade (#{…}), недоступны для Angular. Angular не вступает в игру во время этого процесса. Весь синтаксис Angular ({{…}}) и директивы (ng-repeat) запускаются после того, как указанный файл HTML был сгенерирован и загружен в браузере на стороне клиента.

Из вашего кода кажется, что main.posts доступен только для Jade, а не для Angular. Чтобы ng-repeat='post in main.posts' работал, main должен быть доступен для Angular, то есть для клиентского Javascript. Вы можете найти много способов сделать это. Как это или это, или вы можете изучить создание RESTful API, которые обслуживают данные через экспресс-маршруты и могут быть доступны клиенту через XHR.

25.08.2015
Новые материалы

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

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

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

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..