zoukankan      html  css  js  c++  java
  • Backbone视图渲染React组件

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="UTF-8" />
     5     <title></title>
     6     <script src="react/react-0.14.7/build/react.js"></script>
     7     <script src="react/react-0.14.7/build/react-dom.js"></script>
     8     <script src="react/browser.min.js"></script>
     9     <script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script>
    10       <script src="app/scripts/vendor/underscore.js"></script>
    11        <script src="app/scripts/vendor/backbone.js"></script>
    12   </head>
    13   <body>
    14     <div id="example"></div>
    15     <script type="text/babel">
    16       var HelloMessage = React.createClass({
    17         render: function() {
    18           return <h1>Hello World!{this.props.name}</h1>;
    19         }
    20       });
    21 
    22       ReactDOM.render(
    23         <HelloMessage />,
    24         document.getElementById('example')
    25       );
    26 
    27 
    28        var MyView = Backbone.View.extend({
    29   el: 'body',
    30   template: '<div class="widget-container"></div>',
    31   render: function() {
    32     this.$el.html(this.template);
    33     var HM=React.createFactory(HelloMessage);   
    34     ReactDOM.render(new HM({name:'xxxxx'}), this.$('.widget-container').get(0));
    35     // ReactDOM.render( HM({name:'xxxxx'}), this.$('.widget-container').get(0));
    36     //  ReactDOM.render(<HM  name='xiaoxiao'/>), this.$('.widget-container').get(0));
    37     //  ReactDOM.render(<HelloMessage  name='xiaoxiao'/>), this.$('.widget-container').get(0));
    38     return this;
    39   }
    40     });
    41 
    42         new MyView().render();
    43     </script>
    44   </body>
    45 </html>

  • 相关阅读:
    团队项目总结
    第二阶段团队绩效评分
    “转赚”------使用说明
    团队站立会议14
    团队站立会议13
    团队站立会议12
    团队站立会议11
    团队站立会议10
    LocalDate 今天是一年中的第几天?
    MAC系统Java环境搭建
  • 原文地址:https://www.cnblogs.com/tiancai/p/5700064.html
Copyright © 2011-2022 走看看