GitHub — Tencent / omi на webdesignernews.com

  import  { tag  WeElement  render }  из     оми   

@  Тег  (   Привет-элемент   )
 класс   HelloElement   extends   WeElement  {

     onClick   =  ( evt )  =>  {
          //  триггер CustomEvent 
               abc  ' {name :     dntzhang  ' возраст :   12 })
         ЭВТ .  stopPropagation  ()
    }

     css  () {
       возвращение    ` 
 div {
 цвет: красный; 
 курсор: указатель; 
}  ` 
    }

     render  ( реквизит ) {
       возвращение  (
         < div onClick  =  { это .  onClick } > 
          Привет [ реквизит .  msg } { реквизит .  propFromParent }
           < div >       <  /  div > 
         <  /  DIV > 
      )
    }
} 

  import  { tag  WeElement  render }  из     оми   
 импорт    ' ./ hello-element '  

@  Тег  (   мое-приложение   )
 класс   MyApp   распространяется   WeElement  {
   static   get   данные  () {
        {abc :      ' passToChild :      ' }
  }

    //  bind CustomEvent 
   onAbc   =  ( evt )  =>  {
        //  получить данные evt по evt.detail 
           abc   =       $ {  ЭВТ .  подробно .  имя  }    ` 
       это .  Обновление  ()
  }

   css  () {
     возвращение    ` 
 div {
 цвет: зеленый; 
}  ` 
  }

     реквизит  данные ) {
     возвращение  (
       < DIV > 
        Привет [ реквизит .  имя } { данные .  abc }
           -  элемент onAbc  =  {   onAbc } prop  -  из  -  parent  =  { данные .  passToChild } msg  =    " WeElement  "  > <  /  Привет  -  элемент > 
       <  /  DIV > 
    )
  }
}

   < мое  -  название приложения  =    ' Omi v4.0 '   >   /  мой  -  приложение >   ' тело   ) 

 {
  :    /   [   |   / ]  _  [ ]  S ]   *   .  CSS  $   /  ,
  использование :  [
       в строке-загрузчик   ,
       CSS-погрузчик   
  ]
} 

  import  { tag  WeElement   render }  из    ' оми   

  //  typeof cssStr является строкой 
 импорт   cssStr   из    ' ./_ index.css '  

@  Тег  (   мое-приложение   )
 класс   MyApp   распространяется   WeElement  {

   css  () {
     возвращение  cssStr
  }
   ... 
   ... 
   ...  

  import  { tag  WeElement  render }  из     оми   

@  Тег  (   TODO-лист   )
 класс   TodoList   extends   WeElement  {
     render  ( реквизит ) {
         возвращение  (
             < уль > 
                {19459049] реквизит .  предметы .  карта  ( пункт   => 
                     < li key  =  { Пункт .  id } >  { Пункт .  текст }  <  /  Li > 
                ))}
             <  /  уль > 
        );
    }
}

@  Тег  (   TODO-приложение   )
 класс   TodoApp   extends   WeElement  {
   static   get   данные  () {
      {пункты :  []текст :      ' }
  }

   render  () {
     возвращение  (
       < DIV > 
         < Н3 >   TODO   <  /  Н3 > 
         < todo  -  перечислил элементы  =  { .  данные .  пункты }  /  > 
         < форма onSubmit  =  { этот .  рукояткаSubmit } > 
           < вход
            ID  =    " новый список задачи "  
            OnChange  =  { это .  handleChange }
            значение  =  { это .  Данные .  текст }
           /  > 
           < Кнопка > 
                  .  длина   +   1 }
           <  /  Кнопка > 
         <  /  форма > 
       <  /  DIV > 
    );
  }

   handleChange   =  ( e )  =>  {
         текст   =   e .  Цель .  значение 
  }

   handleSubmit   =  ( e )  =>  {
     е   preventDefault  ().
    если     это .  данные .  текст .  обрезка  ().  длина ) {
       возвращение ;
    }

     это .  Данные .  элементов .  толчок  ({
      текст :   это .  данные .  текст ,
      id :   Дата .  сейчас  ()
    })
       данные .  текст   =        ;
     это .  Обновление  ()
  }
}

   < todo  -  приложение  /  >   ' тело   ) 

  экспорт   по умолчанию  {
  данные :  {
    пункты :  [],
    текст :    ' '  ,
    firstName :    ' dnt '  ,
    lastName :    ' zhang '  ,
     fullName  :   функция  () {
       возвращение   это .  firstName   +   это .  lastName 
    },
    :     abc  '   //  Изменить, он обновит все элементы без изменения компонентов и страницы, объявляющих зависимость данных. 
    ccc : : :   1 }   //  Изменить это будет обновлять все элементы без изменения компонентов и объявления страниц. зависимость. 
  },
       globalPropTest  '  '  ccc.ddd  ' ],
   добавить  :   function  () {
    если     это .  данные .  текст .  обрезка  ().  длина ) {
       возвращение ;
    }
     это .  Данные .  элементов .  толчок  ({
      текст :   это .  данные .  текст ,
      id :   Дата .  сейчас  ()
    })
       данные .  текст   =       
  }
    //  Значение по умолчанию - false, значение true будет обновлять все экземпляры при изменении данных. 
    //  updateAll: true 
} 

  класс   TodoApp   распространяется   WeElement  {
    //  Если вы используете хранилище, данные используются только для объявления зависимостей. 
   static   get   данные  () {
      {пункты :  []текст :      ' }
  }
    //  ... 
   handleChange   =  ( e )  =>  {
           текст   =   e .  цель .  значение 
  }

   handleSubmit   =  ( e )  =>  {
     е .  preventDefault  ()
     это .  магазин .  добавить  ()
  }
} 

    < todo  -  приложение  /  >    тело  ' магазин)