2015-08-28 2 views
5

Я не так сильно переживаю в буйстве js. Иерархия тегов, которые я создал, какКак передать переменную на дочерний тег, используя riot js

<tag-1> 
    <tag-2> 
     <tag-3> 
     </tag-3> 
    </tag-2> 
</tag-1> 

Теперь мне нужно передать переменную (whcih содержит JSON), чтобы «тег-3», и на каждом обновлении этой переменной, как я могу обновить «тег-3». Сейчас я монтаж «тег-3», как

riot.mount('tag-3', { comm: "Hello" }); 

где «Прдч» является переменной величиной, и после монтирования переменных «комм» не доступен в теге «тег-3» он показать не определен. Другое дело, каждый тег html находится в отдельном «.tag» и с этим тегом я вызываю другой тег, например, в файле «tag-1.tag» «tag-2» вызывается и в «tag-2.tag», файл я вызываю «tag-3», а в файле «tag-2.tag» я монтирую «tag-3»

Как я могу это сделать?

ответ

5
  1. Вам не нужно монтировать теги внутри других тегов бунта - нужно только установить корневые теги. Вот почему ваш параметр comm не получает его в tag-3.

  2. У вас может быть несколько определений тегов в одном .tag-файле. После компиляции файлов тегов не имеет значения, загружены ли теги бунта из нескольких файлов тегов или нет.

  3. Вы можете передавать переменные как атрибуты тегов - они будут доступны под переменной opts.

Собираем все вместе, ваш единственный файл тег может выглядеть следующим образом:

<tag-1> 
    <p>This is my TAG1</p> 
    <tag-2 comm="{ commValue}"></tag-2> 

    <script> 
    this.commValue = { text: 'My text' } 
    </script> 
</tag-1> 

<tag-2> 
    <p>This is my TAG2 with comm: { opts.comm.text }</p> 

    <script> 
    this.on('update', function() { 
     // you can use 'opts.comm' here 
    }); 

    </script> 
</tag-2> 
1

Это звучит, как считалось значение комм будет меняться с течением времени. Если это так, лучше всего использовать механизм riot.observable() для отправки сообщений между существующими тегами.

  1. Какого бы метко, которые вызывают ценностное изменение будет «триггер» сообщение по вашему выбору - возможно «value_changed».

    riot.observable().trigger('value_changed', {comm: newValueOfComm})

  2. Тег-3 будет "слушать" для сообщения 'value_changed' и сделать что-то на его основе.

    riot.observable().on('value_changed', function(data) { console.log("new value=" + data.comm); })

Для рабочего примера, проверьте "Механизм 2" по адресу: http://vinapps.com/riot-cookbook-app/#/pages/between-page

Ссылка страница находится здесь: http://riotjs.com/api/observable/