Dev.Front Module Step By Step.zh_cn

1 模块模板

1. 先按照设计图做出静态效果。
2. 写好后台程序后，找到对应的Controller文件里面的Action方法，看后台提供了哪些数据变量。比如demo模块的前台首页：

//usr/module/demo/src/Controller/Front/IndexController.php
public function indexAction() {
    $data = array(
        'data'      => 'Pi-Zend',
        'module'    => $this->params('module'),
        'title'     => __('Demo page'),
    );
    $this->view()->assign($data);
}

Note： 程序如果没有指定模板，则默认的对应模板是template/front/{controller}-{action}.phtml。

1. 在模板中调试变量

<?php
    d($data);
?>

1. 把模板中的假数据替换为php变量。
2. 在模块模板中引入css，css开发规范参照css code standard

<?php
    $this->css($this->assetModule('css/front.css'));
?>

1. 在模块模板中引入js，创建一个与模板文件名字对应的{template name}.js文件
   建议使用Backbone进行交互的开发。

<script src="<?php echo $this->assetModule('scripts/demo-index.js'); ?>"></script>
<script>
// initialize page interactive
demoIndexAction({
   dataCollection: new Backbone.Collection(<?php echo $list; ?>),
   dataModel: new Backbone.Model(<?php echo $item; ?>)
});
</script>

1. js模板，默认使用underscore的模板。把js模板直接写在当前的模板文件中。

<script type="text/template" id="item-template">
    <h4><%= title %></h4>
    <p><%- body %></p>
</script>
//$('#item-template').html()获取模板的html代码, '='与'-'的区别是：前者直接输出数据，后者会将html代码替换成字符串。 

Note： js模板的命名规范是{var}-template,必须以-template结尾。

1. 利用数据模型渲染js模板

this.$el.html(_.template(this.template, this.model.toJSON()));

Note： 以上只是示例代码，实际需求可能需要额外处理。

2 区块模板

区块模板存放在{module name}/template/block/文件夹中。
修改系统模块的login区块时，首先把这个区块dress up到系统首页中去，然后修改system/template/block/login.phtml模板。可以看到模板里面的表单元素是php生成的，如果需要添加一个表单元素到system/src/Form/LoginForm.php中，可以参照已有的代码，添加一个元素，比如添加email。
在LoginForm.php中添加如下代码

<?php
        $this->add(array(
            'name'          => 'email',
            'options'       => array(
                'label' => __('Email'),
            ),
            'attributes'    => array(
                'type'  => 'text',
            )
        ));
?>

在login.phtml模板中添加如下代码

<?php
    $email= $form->get('email');
    $email->setAttributes(array(
        'placeholder' => $email->getOption('label'),
        'class' => 'span2'
    ));
?>
<div class="control-group">
    <div class="input-prepend">
        <span class="add-on"><i class="icon-user"></i></span>
        <?php echo $this->formElement($email); ?>
    </div>
</div>

注意 ：对于模块程序的开发可以参考教程Module Design