我是 ReactJS 的新手,请原谅我。我们医院有一个现有的 Marionette BackboneJS 应用程序。但是,下面的代码是一个工作 BackboneJS Marionette 的示例,我想用 ReactJS View 替换 Marionette。这将对我如何迁移到 ReactJS 提供极大帮助。
如果我们可以使用 GET 方法调用(xhr/ajax)检索 contentPlacement: "here",那就太棒了。
<header>
<h1>An Example BackboneJS Marionette</h1>
</header>
<article id="main">
</article>
<script type="text/html" id="sample-template">
put some content <%= contentPlacement %>.
</script>
下面是 JavaScript 代码
// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({
"mainRegion": "#main"
});
// Create a module to contain some functionality
// ---------------------------------------------
App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
// Define a view to show
// ---------------------
var MainView = Marionette.ItemView.extend({
template: "#sample-template"
});
// Define a controller to run this module
// --------------------------------------
var Controller = Marionette.Controller.extend({
initialize: function(options){
this.region = options.region
},
show: function(){
var model = new Backbone.Model({
contentPlacement: "here"
});
var view = new MainView({
model: model
});
this.region.show(view);
}
});
// Initialize this module when the app starts
// ------------------------------------------
Mod.addInitializer(function(){
Mod.controller = new Controller({
region: App.mainRegion
});
Mod.controller.show();
});
});
// Start the app
// -------------
App.start();
这是 jsfiddle 链接 - http://jsfiddle.net/Lvnwj2dp/1/
有人可以指导我如何用 ReactJS 替换 Marionette 的 View 吗?一个新的代码真的很棒!
更新:
这是我的新 jsfiddle。它正在执行 REST api 调用,但没有更新 DOM。 http://jsfiddle.net/6df6a2zv/10/
var url = 'http://jsonplaceholder.typicode.com';
var responseText = '';
console.log('executing the request ......');
$.ajax({
url: url + '/posts/1',
method: 'GET'
}).then(function(data) {
responseText = data;
});
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"REST response:" + responseText
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('main')
);
// Define the app and a region to show content
// -------------------------------------------
// var App = new Marionette.Application();
// App.addRegions({
// "mainRegion": "#main"
// });
// Create a module to contain some functionality
// ---------------------------------------------
// App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
// Define a view to show
// ---------------------
// var MainView = Marionette.ItemView.extend({
// template: "#sample-template"
// });
// Define a controller to run this module
// --------------------------------------
// var Controller = Marionette.Controller.extend({
// initialize: function(options){
// this.region = options.region
// },
// show: function(){
// var model = new Backbone.Model({
// contentPlacement: "here"
// });
// var view = new MainView({
// model: model
// });
// this.region.show(view);
// }
// });
// Initialize this module when the app starts
// ------------------------------------------
// Mod.addInitializer(function(){
// Mod.controller = new Controller({
// region: App.mainRegion
// });
// Mod.controller.show();
// });
// });
// Start the app
// -------------
// App.start();
最佳答案
Typescript CodePen 示例
我很快就会写一篇更好的文章,但这里有一些接近您正在寻找的内容。我正在使用 Typescript 并把 jsx 排除在外,因为一是我不太喜欢它,二是它添加了另一件事来学习和 react ,有时可能是一次精神上的飞跃。请参阅下面的 codepen 链接
Typescript 本质上是 ES6,具有良好的类型系统,我认为这些类型在尝试学习新代码时实际上非常有帮助。
记住react只是 View 层,你需要像Flux这样的东西来用数据和路由器来驱动它,我建议使用react-router。
这是示例中的类型,这应该是唯一真正看起来非 js 的代码。
interface ViewProps {
children:any;
id:string;
headerTitle:string;
bgColor?:string;
className?:string;
}
interface ViewState {
bgColor:string;
}
http://codepen.io/Thecavepeanut/pen/mVMVEx
干杯, jack
注意:你可以在codepen上查看编译后的JS
关于javascript - 将 View 更改为 ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34757102/