文档中心

搜索热词: 下载安装 支付插件 模板 增删改查

数据绑定
本章节主要是介绍,如何在控制器中显示一个视图文件,并将数据传递到视图显示,包括数组遍历、条件判断等。
一、视图文件
视图文件就是控制器渲染视图加载的文件。不同的应用(站点)加载的视图文件路径有所不同,分别位于应用(站点)的web/templates目录下 ,如PC前台(frontend)的视图文件路径为@shopwind/frontend/web/templates/mall/default,当然,您也可以通过 修改配置文件@shopwind/frontend/config/main.phpview组件,把视图文件路径修改为其他地址,如下图:
'components' => [
    'view' => [
        'theme' => [
            'basePath' => '@app/web/templates/mall/default',
            'baseUrl' => '@web/templates/mall/default'
        ],
        ...
    ]
]
二、显示数据
那么,我们如何将控制器方法中的数据,比如用户数据,订单列表显示到视图文件上呢。这时候我们需要一个render方法,代码如下:
namespace frontend\controllers;
use Yii;
class CompanyController extends \common\controllers\BaseMallController
{
    public function init() {
        parent::init();
    }
    public function actionAbout() {
        $this->params = [
            'title' => 'ShopWind电商系统',
            'content' => 'ShopWind是一款开源的B2B2C电商系统...',
            'company' => [
                'ceo' => 'shopwind',
                'tel' => '18999999999'
            ]
        ];
        return $this->render('../about.html', $this->params);
    }
}
视图文件@shopwind/frontend/web/templates/mall/default/about.html代码如下:
<html> <title>{$title}</title> <body> <div>{$content}</div> <div>公司CEO: {$company.ceo}</div> <div>联系电话:{$company.tel}</div> </body> </html>
这样,就能把数据传送到视图显示了,当我们打开页面 http://localhost/shopwind/frontend/web/default/about.html就能看到实际的数据了。 render方法的第一次参数就是视图文件的相对路径,第二个参数就是需要传递到视图的数据集合。如果需要遍历一个list数组,则代码如下:
...
class CompanyController extends \common\controllers\BaseMallController
{
    ...
    public function actionAbout() {
        $this->params = [
            'news' => [
                array(
                    'title' => '文章标题1',
                    'content' => '文章内容1',
                )
                array(
                    'title' => '文章标题2',
                    'content' => '文章内容2',
                )
                ...
            ]
        ];
        return $this->render('../about.html', $this->params);
    }
}
视图(View)文件代码如下:
<html> <body> {foreach from=$news item=article name=fe_name key=key} <dl> <dt>记录编号: {$key}</dt> <dd>文章序号: {$smarty.foreach.fe_name.iteration}</dd> <dd>文章标题: {$article.title}</dd> <dd>文章内容:{$article.content}</dd> </dl> {/foreach} </body> </html>
注意:记录编号对应数组news的key值,在本实例中是从0开始的数,文章序号是从1开始的记录数,每遍历一条记录后实现自增。
如果我们只需要显示前十条记录,多余的记录不显示,则需要加一个条件判断,视图部分代码如下:
<html> <body> {foreach from=$news item=article name=fe_name key=key} {if $smarty.foreach.fe_name.iteration <= 10} <dl> <dt>记录编号: {$key}</dt> ... <dd>文章内容:{$article.content}</dd> </dl> {/if} {/foreach} </body> </html>
除了使用if $smarty.foreach.fe_name.iteration <= 10外,也可以使用if $key <= 9(前提是key值是从0开始的数),此外,Smarty 也提供了一些过滤器给我们使用,以下就是几个常用的过滤器方法:
当为空值时,显示一个默认值
{$article.title|default:"shopwind"}
截取字符串,取前30个字符,超出的部分以省略号显示
{$article.title|truncate:30:"..."}
格式化时间戳,输出如:2020-10-07 12:34:55
{$article.add_time|date_format:"%Y-%m-%d %H:%M:%S"}
格式化路径,输出绝对地址,如:http://www.shopwind.net/assest/images/logo.gif
{$goods.goods_image|url_format}
货币金额格式化,输出如:¥455,890.78
{$goods.price|price_format}
三、引入文件
有时候,我们需要在视图文件中引入外部文件,比如在about.html这个视图文件中包含通用的headerfooter,代码如下( 注意about.html 和 header.html 是在同一目录,如果不在同一目录,也可以加上目录路径,如:common/header.html)
{include file="header.html"} <div>这里是about.html</div> {include file="footer.html"}
引入CSS,JS文件,这里用到了两个标签,reslib
<link type="text/css" href="{res file='css/header.css'}" rel="stylesheet" /> <script type="text/javascript" src="{res file='js/main.js'}"></script> <script type="text/javascript" src="{lib file='jquery-1.11.1.js'}"></script>

res对应的是当前模板,当前风格的CSS/JS文件目录,假设当前模板为default,当前风格为default, 则res对应的路径为@shopwind/frontend/web/templates/mall/default/styles/default

lib对应的是公共资源文件目录,即:@shopwind/frontend/web/assets,请注意:该目录为资源发布目录,源文件路径为 @shopwind/frontend/resource,该资源文件可以同时给不同的应用(站点)调用,并通过发布的形式,发布到各自web/assets目录下,解决公共资源文件跨域调用问题。

res是不需要发布的目录,访问路径即为源文件路径,而lib是资源发布路径,并非源文件路径,有关资源发布的问题,我们将在后面的章节详细介绍。
四、生成链接
在视图文件中,我们要经常设置链接,比如从一个页面跳转到另外一个页面,可能还会携带参数等,那么在视图中,我们用url标签来生成一个链接。
# 相当于 Url::toRoute(['post/index']) 输出为:/post/index.html {url route='post/index'} # 相当于 Url::toRoute(['post/view', 'id' => 100]) 输出为:/post/view.html?id=100 {url route='post/view' id=100} # 带多个参数,输出为:/post/list.html?page=10&type=new {url route='post/list' page=10 type='new'} # 如果参数是变量,则如: {url route='post/view' id=$article.id} # 如果是在后台,需要设置一个链接跳转到前台,输出:http://www.example.com/post/view.html?id=100 {url route='post/view' id=100 baseUrl=$homeUrl}
注意baseUrl是保留字,并不编译为链接参数,该参数的作用是设置绝对路径,以方便从一个应用(站点)设置链接跳转到另外一个应用(站点)。
更多问题,可以访问我们的 开发者社区反馈,我们会有官方技术人员在线解答。