Node.js 卓别林与区域
在开始使用node.js和卓别林时,我需要一些帮助 以下是场景:Node.js 卓别林与区域,node.js,chaplinjs,Node.js,Chaplinjs,在开始使用node.js和卓别林时,我需要一些帮助 以下是场景: 客户端来到我的服务器 我向客户端提供一个静态html页面。在这个html中有一个id为“test”的div 这个html还启动了卓别林应用程序 在我的卓别林应用程序中,我希望能够将事件附加到“测试”div,例如单击div警报“Yeah” 这是怎么回事 因为我通过尝试(因为我真的没有找到关于卓别林的任何好的说明…)学到的是,我需要创建区域,然后将我的观点放入其中。这些视图只能在此区域内包含事件。我不明白的是,如何使用这个“测试”
- 客户端来到我的服务器
- 我向客户端提供一个静态html页面。在这个html中有一个id为“test”的div
- 这个html还启动了卓别林应用程序
- 在我的卓别林应用程序中,我希望能够将事件附加到“测试”div,例如单击div警报“Yeah”
var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');
var app = express();
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
客户端
index.html
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/stylesheets/app.css">
<script src="/javascripts/vendor.js"></script>
<script src="/javascripts/app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<div id="test">
</div>
</div>
</body>
</html>
家用咖啡
Controller = require 'controllers/base/controller'
HeaderView = require 'views/home/header-view'
HomePageView = require 'views/home/home-page-view'
module.exports = class HomeController extends Controller
beforeAction: ->
super
@compose 'header', HeaderView, region: 'header'
index: ->
@view = new HomePageView region: 'main'
主页浏览
View = require 'views/base/view'
module.exports = class HomePageView extends View
autoRender: true
className: 'home-page'
template: require './templates/home'
events:
'click "testi"': 'testEvent'
testEvent: (event) ->
alert "Yeah"
单击HomePageView可以正常工作,但是如何将该事件绑定到html中的“test”div,或者如何将现有div用作区域?您可以将容器选项添加到主布局视图中,其中的值是dom元素,例如#test。所以它可能看起来像这样
View = require 'views/base/view'
module.exports = class HomePageView extends View
container: '#test'
autoRender: true
className: 'home-page'
template: require './templates/home'
events:
'click "testi"': 'testEvent'
testEvent: (event) ->
alert "Yeah"
我还建议你看看这个项目-。一个很好的样板示例,应该有助于您的理解。我对任何一个以“设计模式和最佳实践”模糊承诺为主要卖点的图书馆都深表怀疑。是什么促使您选择卓别林而不是使用主干、jQuery等?一般来说,视图的
render
方法将生成一些HTML,并且events
对象绑定到该HTML中的元素。我认为卓别林不允许你将事件绑定到你看不见的元素。
View = require 'views/base/view'
module.exports = class HomePageView extends View
container: '#test'
autoRender: true
className: 'home-page'
template: require './templates/home'
events:
'click "testi"': 'testEvent'
testEvent: (event) ->
alert "Yeah"