Чаплин и регионы

Мне нужна помощь в начале работы с node.js и Chaplin

Вот сценарий:

  • Клиент заходит на мой сервер
  • Я предоставляю клиенту статическую HTML-страницу. В этом html есть div с и id "test"
  • Этот HTML также запускает приложение Чаплин
  • в своем приложении chaplin я хочу иметь возможность прикрепить событие к "тестовому" div, например, нажав на оповещения div "Да"

Как это работает?

То, что мне удалось выучить, пытаясь (поскольку я действительно не нахожу каких-либо хороших инструкций по этому чаплину...), заключается в том, что мне нужно создавать регионы, в которые я затем помещаю свои взгляды. Эти представления могут иметь события только внутри этого региона. Чего я не понимаю, так это как использовать этот "тестовый" 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"

Нажатие хорошо работает в этой вещи HomePageView, но как я могу связать это событие с "тестовым" div в моем html или как я могу использовать уже существующие div в качестве регионов?

Источник

1 ответ

Вы бы добавили опцию контейнера в ваш основной вид макета, где значением является ваш элемент 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"

Я бы также предложил вам взглянуть на этот проект - https://github.com/chaplinjs/chaplin-boilerplate. Хороший пример, должен помочь с вашим пониманием.

Источник
Другие вопросы по тегам