Question

我开始使用Backbone AMD应用程序，使用React.js作为视图。该视图无法识别我在render（）函数中编写的JSX。我在路由器或视图中错过了一个声明吗？我收到的错误是＆＃39;意外的令牌＆lt;＆＃39;。

以下是从上到下的应用流程：

的index.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script> -->
<script data-main="js/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>

main.js

require.config({
paths: {
   jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min',
   underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min',
   backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
   react: 'http://fb.me/react-0.12.0',
   JSXTransformer: 'http://fb.me/JSXTransformer-0.12.0'
}
});

require([

 // Load our app module and pass it to our definition function
'app',
], function(App){
// The "app" dependency is passed in as "App"
App.initialize();
});

app.js

define([
 'jquery',
 'underscore',
 'backbone',
 'router' // Request router.js

], function($, _, Backbone, Router){
   var initialize = function(){
   // Pass in our Router module and call it's initialize function
   Router.initialize();
}

return {
  initialize: initialize
};
});

router.js

define([
'jquery',
'underscore',
'backbone',
'views/team/list' 
 ], function($, _, Backbone, TeamListView){

 var AppRouter = Backbone.Router.extend({
   routes: {
   // Define some URL routes
  'team': 'showTeam',

  // Default
  '*actions': 'defaultAction'
  }
});

 var initialize = function(){
    var app_router = new AppRouter;

    app_router.on('route:showTeam', function(){
    // Call render on the module we loaded in via the dependency array
    // 'views/teams/list'
    var teamListView = new TeamListView();
    teamListView.render();

  });

  app_router.on('route:defaultAction', function(actions){
    // We have no matching route, lets just log what the URL was
    console.log('No route:', actions);
  });

  Backbone.history.start();

};
return {
  initialize: initialize
};
});

list.js

/**
 * @jsx React.DOM
*/
define(
  [
  'jquery',
  'underscore',
  'backbone',
  'react',
  'JSXTransformer'
  ], function($, _, Backbone, react, JSXTransformer){

    var MyWidget = React.createClass({
      handleClick: function() {
        alert('Hello!');
      },
      render: function() {
        return (
          <a href="#" onClick={this.handleClick}>Do something!</a>
          );
       }
    }),

    var TeamListView = Backbone.View.extend({
      el: 'body',
      template: '<div class="widget-container"></div>',
      render: function() {
        this.$el.html(this.template);
        React.renderComponent(new MyWidget(), this.$('.widget-container').get(0));
        return this;
      }
    });
  // Our module now returns our view
  return TeamListView;
});

list.js（已更新 - 工作版本）

define(
  [
  'jquery',
  'underscore',
  'backbone',
  'react'
  ], function($, _, Backbone, React){

  var MyWidget = React.createClass({displayName: 'MyWidget',
      handleClick: function() {
      alert('Hello!');
  },
  render: function() {
    return (<div>
      <ul>
      <li></li>
      <li></li>
      </ul>
      <div>Test</div>
      <a href="#" onClick={this.handleClick}>Do something!</a>
      </div>
      )
  }
});

var TeamListView = Backbone.View.extend({

  el: $('#mainContent'),
        events: {

        },

        initialize: function() {
            console.log('test');
        },

        render: function (){

          React.render(
            React.createElement(MyWidget, null),
            document.getElementById('mainContent')
          );
        }     
  });

  return TeamListView;
});

Answer 1

在浏览器可以理解之前，必须将JSX编译为JavaScript。

您可以使用jsx tool执行此操作。

JSX转换器和Require.js不兼容。

Answer 2

如果您使用的是RequireJS，则可以使用JSX插件like this one。值得一提的是，当我将JSX变换器集成到我们的RequireJS设置中时，需要进行相当多的调整和实验。

Backbone / ReactJS视图无法识别JSX

2 个答案: