卓別林和地區

我需要在開始使用Node.js的一些幫助和卓別林卓別林和地區

這裏的情景：

客戶來我的服務器
我成爲一個靜態的HTML頁面客戶端。在這個HTML有一個div與ID「測試」
這個HTML也啓動chaplin應用程序
在我的chaplin應用程序，我想能夠附加一個事件到「測試」div，例如點擊div警報「是啊」

這是如何工作的？

對於我試圖通過嘗試學習（因爲我沒有真正找到這個chaplin上的任何好的指示..）是我需要創建區域，然後我把我的意見。這些視圖只能在該區域內有事件。我沒有得到的是如何使用這個「測試」div作爲一個區域？

服務器

app.js

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>

routes.coffee

module.exports = (match) -> 
    match '', 'home#index'

home-controller.coffee

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'

home-page-view.coffee

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"

單擊工程確定在該主頁的事情，但我怎麼可能事件綁定到「測試「div在我的html，或者我怎麼能使用已經存在的divs作爲區域？

來源

2013-10-15 Garrry

我深信任何圖書館的主要賣點是模糊的「設計模式和最佳實踐」承諾。是什麼促使你選擇Chaplin而不是使用Backbone，jQuery等？ –

一般來說，你的視圖的'render'方法會產生一些HTML，'events'對象綁定到HTML中的元素。我認爲卓別林不允許你將事件綁定到你認爲不合適的元素上。 –

您可以將容器選項添加到主佈局視圖，其中的值是您的dom元素，例如＃測試。所以它可能看起來像這樣。

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"

我也建議你看看這個項目 - https://github.com/chaplinjs/chaplin-boilerplate。一個很好的樣板例子，應該有助於你的理解。

來源

2013-11-05 21:16:42

卓別林和地區

回答

相關問題