Как передать данные в динамический компонент Ractive?

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

Я понимаю в простейшем случае, как передать данные в компонент:

(e.g., <dog theData={{theData}} />)

Но в этом случае я использую функцию Ractive.extend, чтобы предоставить компонент циклу, и пробовал много вещей, чтобы получить правильные данные для каждого компонента, но безрезультатно.

Эта скрипка должна объяснить это: https://jsfiddle.net/4kax8dLo/7/

В функции «getComponent» мне нужно использовать «this», чтобы найти соответствующие данные в «homePageSections» и передать эти данные в компонент.

В случае успеха на странице должно быть написано «navText is yee haa».

(Если это кажется слишком сложным способом размещения материала на странице, дайте мне знать, и я смогу подробно описать вариант использования. Возможно, существует более простой и элегантный способ достижения цели.)

Благодарен за любое руководство или совет!


ractivejs
person James Jensen    schedule 13.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы уверены, что вам вообще нужны компоненты? Из вашего примера кажется, что вы бы справились только с частичными (http://docs.ractivejs.org/latest/partials).

Если это так, я немного изменил ваш пример, чтобы он работал с частичным подходом. https://jsfiddle.net/cxnhtxLy/

Определение партиалов:

partials: { 
  dog: '{{#with theData}}<h3>the dog is a <span style="color: {{color}};">{{dogType}}</span> and this works fine</h3>{{/with}}',
  topHomeNav: '<div>the navText is: {{data.navText}} </div>',
  heroUnit:'<div><h2>THE HERO TITLE IS:</h2><br />{{data.heroTitle}}</div>',
  filterResults: '<div>filter results: </div>',
  pageFooter:'<div>footertext is: {{data.footertext}}</div>'
}

Ваш цикл для их печати:

{{#each homePageData.views[currentView]}}
{{#with homePageData.homePageSections[this]}}
    {{> this.partial}}
{{/with}}
{{/each}}

При этом вы, вероятно, могли бы реорганизовать свой код, чтобы он выглядел намного чище, если вы удовлетворены тем, что частичные коды — это все, что вам нужно для этой задачи.

ОБНОВЛЕНИЕ: это скрипт, работающий с компонентами. https://jsfiddle.net/grkgb0sr/ Дополнительную предысторию смотрите в комментариях ниже.

person Leakim    schedule 15.09.2016
comment
Большое спасибо, это значительно проясняет ситуацию, хотя я сильно упростил вариант использования, мне на самом деле нужны компоненты, потому что у каждого компонента есть логика, которую нам нужно сохранить в компоненте. Но мы посмотрим, сможем ли мы адаптировать ваш пример для использования компонентов. Если вы захотите заняться этим, мы будем рады заплатить за консультацию (не уверен, что кошерно говорить об этом на Stack Overflow!). - person James Jensen; 15.09.2016
comment
В этом случае, я думаю, вы могли бы попробовать это для размера (jsfiddle.net/grkgb0sr). Это довольно жестко закодировано, но, по крайней мере, ваш пример работает с компонентами. Надеюсь, это даст вам что-то еще, чтобы посмотреть :) - person Leakim; 19.09.2016
comment
Это именно то, что я пытался сделать, большое спасибо!! - person James Jensen; 19.09.2016
comment
Рад, что смог помочь! Изменил мой ответ, чтобы вы могли принять его как лучший ответ, и мы будем считать это решенным. - person Leakim; 20.09.2016