Handlebars + React.js: как заставить работать?

Question

[Isaac Clark]

Здравствуйте.
В практических целях решил попробовать использовать хэндлбарс с реактом, но никак не могу заставить работать.
К примеру, как данный код сделать рабочим? И есть ли смысл на проекте использовать реакт и хэндлбарс?

render: function () {
        var data = this.state.previewData;

       // ??????????
       // Handlebars.compile();

        return <div className="row" id="compile">
                    <script type="text/x-handlebars-template">
                          {{CompanyName}}  
                    </script>
               </div>
    }

Спасибо за помощь!

Answer 1

[Денис Инешин]

Ээ, вы чего, в реакт встроен свой шаблонизатор, пишите код на JSX. Вы всю концепцию реакта нарушаете, используя сторонний шаблонизатор!

Если так хочется писать шаблоны на Handlebars, переходите на Ember.js

Comments

[Isaac Clark]

ТО есть, если мне с сервера приходит шаблон на Handlebars я могу спокойно его парсить реактом?

[Isaac Clark]

Isaac Clark: а как парсить значения типа {{CompanyName}}? дА, объект данных приходит, но как их подставлять правильно?

[Денис Инешин]

Isaac Clark: вам с сервера должны приходить только данные в JSON, а не шаблон

[Isaac Clark]

Денис Инешин: к сожалению в моем случае приходит одним запросом, к примеру "{{name}}" и вторым запрососм приходит {"name": "vasya"}, вот и вопрос, как мне на реакте это распарсить? или без хэндлбарс не получится?

[Денис Инешин]

Isaac Clark: ну вот Name: vasya и нужно использовать. Посмотрите в реакте, в JSX шаблоне, переменные записываются примерно так: {this.props.name}

[Isaac Clark]

Денис Инешин: да, допустим данные я получил, но как мне сделать замену? то есть div{{name}}div ? вот в этом проблема,как мне в двойные фигурные скобки подставить нужное значение параметра?

[Денис Инешин]

Isaac Clark: так вы должны переделать Handlebars шаблоны в React JSX шаблоны. А там это выглядит примерно так: <div>{this.props.name}</div>

[Isaac Clark]

Денис Инешин: извините, но я не совсем понимаю. Есть "div{{name}}div" и отдельно {"name":"vasya"}. В ректе render: function () { return div div } Что мне написать между тегами див в рендер методе, чтоб отобразить правильно шаблоН?

[Денис Инешин]

Isaac Clark: реакт оперирует со своими типами данных, props и state. Когда вы снаружи получили данные, то они обычно попадают в props и будут доступны через this.props.get('имя ваше переменной');

[Isaac Clark]

Денис Инешин: Подскажите пожалуйста, если у меня есть строка "Vasya" то как мне ее вывести с помощью реакта не в виде строки, а как html элемент див, внутри которого текст? Если я делаю render: return то мне выводится ,как строка

Answer 2

[Александр]

Инициализируйте Handlebars в componentDidMount

Comments

[Isaac Clark]

вы имеете в виду так? componentDidMount: function () {
var template = Handlebars.compile("{{name}}");
var context = {"name": "Vasya"};
var html = template(context); }) а как потом вывести html ? он ведь в виде строки, я его добавляю в елемент, а он как строка выводится вместе с html тегом