Dev.Front Module Step By Step.zh_cn

模块程序

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

模块模板

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

//usr/module/demo/src/Controller/Front/IndexController
public function indexAction() {
    $data = array(
        'data'      => 'Pi-Zend',
        'module'    => $this->params('module'),
        'title'     => __('Demo page'),
    );
    $this->view()->assign($data);
}
//程序如果没有设置模板，则对应的模板是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: 以上只是示例代码，实际需求可能需要额外处理。

区块模板