将ReactGridLayout与AngularJS一起使用
我是新来的 我想尝试合并以下“ReactGridLayout”模块: 在我正在从事的一个Mean.JS v0.4项目中 我首先将ngReact添加到我的项目并添加资产:将ReactGridLayout与AngularJS一起使用,angularjs,reactjs,meanjs,ngreact,Angularjs,Reactjs,Meanjs,Ngreact,我是新来的 我想尝试合并以下“ReactGridLayout”模块: 在我正在从事的一个Mean.JS v0.4项目中 我首先将ngReact添加到我的项目并添加资产: // application/config/assets/default.js module.exports = { client: { lib: { css: [ // ... 'public/lib/react-g
// application/config/assets/default.js
module.exports = {
client: {
lib: {
css: [
// ...
'public/lib/react-grid-layout/css/styles.css',
'public/lib/react-resizable/css/styles.css'
],
js: [
// ...
'public/lib/react/react.js',
'public/lib/react/react-dom.js',
'public/lib/ngReact/ngReact.min.js',
'public/lib/react-grid-layout/react-grid-layout.min.js',
]
}
}
};
然后在我的模型的module.config文件中:
angular
.module('model', ['react'])
在我的客户端控制器中,我添加了以下内容:
// model.client.controller.js
var MyFirstGrid = React.createClass({
displayName: 'MyFirstGrid',
render: function render() {
// layout is an array of objects, see the demo for more complete usage
var layout = [{ i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, { i: 'c', x: 4, y: 0, w: 1, h: 2 }];
return React.createElement(
ReactGridLayout,
{ className: 'layout', layout: layout, cols: 12, rowHeight: 30, width: 1200 },
React.createElement(
'div',
{ key: 'a' },
'a'
),
React.createElement(
'div',
{ key: 'b' },
'b'
),
React.createElement(
'div',
{ key: 'c' },
'c'
)
);
}
});
app.value('MyFirstGrid', MyFirstGrid);
在我看来,我补充道:
// view-model.client.view.html
<react-component name="MyFirstGrid" props="layout" watch-depth="reference"/>
这并非完全出乎意料,STRML的ReactGridLayout文档包括:
var ReactGridLayout = require('react-grid-layout');
然而,因为我试图将其包含在客户端控制器中,所以不能使用“requires”,这就是为什么我试图将其添加为“资产”
我怎样才能避开这件事
谢谢 我也很好奇。。好奇你从哪里得到这个?对于这个项目,我最终离开了react,而是使用了“angular gridster”,请看:我对同样的东西很好奇。。好奇你是从哪里得到这个的?对于这个项目,我最终离开了react,而是使用了“angular gridster”,请参见:
var ReactGridLayout = require('react-grid-layout');