handlebars+kendo-ui grid单元格点击事件（二）

最新推荐文章于 2021-08-04 06:05:01 发布
最新推荐文章于 2021-08-04 06:05:01 发布
阅读量570 收藏
点赞数
分类专栏： kendo-ui 前端web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyizhizaizhaoni/article/details/102459048
版权

关于点击事件后弹出窗口，显示返回绑定数据：

//.hbs page
<form>
        <label style="display:inline-block;width:70px">项目年度</label>
        <input style="width: :160px" data-role="dropdownlist" data-text-field="year" data-value-field="id"
                data-bind="source:yearSource,value:queryForm.year" style="width: 160px" />
        <label style="display:inline-block;width:70px">用工单位</label>
        <input style="width: :160px" data-role="dropdownlist" data-text-field="org_name" data-value-field="org_code"
                data-bind="source:endUserSource,value:queryForm.userorg" style="width: 160px" />
        <label style="display:inline-block;width:70px">项目类别</label>
        <input style="width: :160px" data-role="dropdownlist" data-text-field="dictname" data-value-field="dictcode"
                data-bind="source:proClassSource,value:queryForm.proclass" style="width: 160px" />
        <label style="display:inline-block;width:70px">项目状态</label>
        <input style="width: :160px" data-role="dropdownlist" data-text-field="dictname" data-value-field="dictcode"
                data-bind="source:proStatueSource,value:queryForm.prostatue" style="width: 160px" />
        <label>项目编号:
                <input class="k-textbox" style="width: 15%;" data-bind="value: queryForm.procode" />
        </label>
        <label>项目名称:
                <input class="k-textbox" style="width: 15%;" data-bind="value: queryForm.proname" />
        </label>
        <span style="float:right">
                <button type="button" data-role="button" data-icon="refresh" data-bind="click:onQuery">查询</button>
                {{!-- <button type="button" data-role="button" data-icon="plus" data-bind="click:onAdd">新增</button>
                <button type="button" data-role="button" data-icon="edit" data-bind="click:onModify,enabled:isModifiabled">修改</button>
                <button type="button" data-role="button" data-icon="delete" data-bind="click:onRemove,enabled:isRemoveable">删除</button>
                <button type="button" data-role="button" data-icon="upload" data-bind="click:onImport">导入</button> --}}
                <button type="button" style="margin-right:15px" data-role="button" data-icon="excel"
                        data-bind="click:onExport">导出</button>
        </span>
</form>
<div class="clearfloat"></div>
<div id="grid"></div>
{{!-- <div data-role="grid" data-resizable="true" data-selectable="multiple, row" data-scrollable="true" data-pageable="{
            pageSizes: [20, 50, 100],
            pageSize: 20,
        }" data-columns="[
                   { 'field': 'id', 'title': '序号', 'width': 100},
                    { template: kendo.template($('#tmplButtonPopup{{detailId}}').html()), title: '操作', width:250} ,
                    { 'field': 'projcode', 'title': '项目编号', 'width': 180  }, 
                    { 'field': 'projname', 'title': '项目名称', 'width': 180 }, 
                    { 'field': 'projyear', 'title': '年度', 'width': 80 },
                    { 'field': 'protypename', 'title': '项目类别', 'width': 100 },
                    { 'field': 'projworkcontent', 'title': '作业内容', 'width': 320 },
                    { 'field': 'projpersoncount', 'title': '定员人数', 'width': 100 },
                    { 'field': 'projmoney', 'title': '项目总数', 'width': 100 },
                    { 'field': 'proorgname', 'title': '用工单位', 'width': 100 },
                    { 'field': 'prostatuename','title': '项目状态', 'width': 100 }
                    ]" data-bind="source: dataSource,selected:_selectedItems"
        style="height:{{height}}px;margin-top:10px;text-align:center;">
</div> --}}
{{!-- <a href="javascript:check( \''+{{value}} '\')">变更</a> --}}
{{!-- { 'field': 'protypecode', 'title': '项目类别', 'width': 100 },  --}}
{{!-- { field: 'proorgcode', 'title': '用工单位', 'width': 100 },  --}}
{{!-- { field: 'prostatuecode', 'title': '项目状态', 'width': 100 },  --}}
{{!-- { width:120,title:'项目详情',command: [{text: '详细信息', click(){ {{permalink}} } }]},

                     #if(data.uploaded=='是'){#
            <button class="k-link btns download-attachment" >下载附件</button>
        #}  #
        #if(data.approvestatus=='100' || data.approvestatus=='400'){#
            <button class="k-link btns edit-item"  >编辑</button>
            <button class="k-link btns remove-list-item" >删除</button>
        #}#--}}




<div class="k-popup-edit-form" data-role="window" data-visible="false" data-modal='true' id="{{editFormId}}detail"
        style="width:1100px;height:400px;margin-top:5px">
        <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                <label>
                        <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">项目编码:</label>
                        <input class="k-textbox" style="width: 15%;margin:5px;" 
                        data-bind="value: _currentItem2.projcode" />
                </label>
                <label>
                        <label style="display:inline-block;text-align:right;width:70px">项目名称:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projname" />
                </label>
                <label>
                        <label style="display:inline-block;text-align:right;width:70px">项目年度:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projyear" />
                </label>
                 <label>
                        <label style="display:inline-block;text-align:right;width:70px">项目分类:</label>
                       <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.protypename" />
                </label>
        </div>
        <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                <label>
                        <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">招标方式:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projZbTypeName" />
                </label>
                 <label>
                        <label style="display:inline-block;text-align:right;width:70px">用工单位:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.proorgname" />
                </label>
                 <label>
                        <label style="display:inline-block;text-align:right;width:70px">用工类型:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projYgClassName" />
                </label>
                <label>
                        <label style="display:inline-block;text-align:right;width:70px">准入方式:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projZrTypeName" />
                </label>
                
        </div>
        <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                
                <label>
                        <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">管理部门:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projManageOrgName" />
                </label>
                <label>
                        <label style="display:inline-block;text-align:right;width:70px">项目总额(元):</label>
                       <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projmoney" />
                </label>
                <label>
                        <label style="display:inline-block;text-align:right;width:70px">定员人数:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projpersoncount" />
                </label>
                <label>
                        <label style="display:inline-block;text-align:right;width:70px">外雇人数:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projPersonOutCount" />
                </label>
        </div>
        <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">
                <label>
                        <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">供应商性质:</label>
                       <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.proname" />
                </label>
                <label><label style="display:inline-block;width:95px">计划开始日期:</label>
                        <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projPlanBeginDate" />
                </label>
                <label><label style="display:inline-block;width:95px">计划结束日期:</label>
                       <input class="k-textbox" style="width: 15%;margin:2px;" data-bind="value: _currentItem2.projPlanEndDate" />
                </label>

        </div>
        <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">

                <label>
                        <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">项目要求:</label>
                        <input class="k-textbox" style="width: 78%;height:70px;margin:2px;"
                                data-bind="value:_currentItem2.projManageReqDesc" />
                </label>


        </div>
        <div class="k-edit-form-container" style="width: 100%;margin-top:10px;">

                <label>
                        <label style="display:inline-block;text-align:right;width:95px;margin-left:7px">项目意见:</label>
                        <input class="k-textbox" style="width: 78%;height:70px;margin:2px;"
                                data-bind="value:_currentItem2.projManageOpinion" />
                </label>

        </div>
</div>
{{!-- 
<script id="tmplButtonPopup{{detailId}}" type="text/x-kendo-template">
      <button class="edit-item" >详情</button>
</script> --}}

{{!-- #if(data.procode!=""){#
      <button class="edit-item" >详情</button>
    #} # --}}
//SupplierViewModule page
import CrudViewModel from '../../components/CrudViewModel';

export default class SupplierViewModule extends CrudViewModel {
    protected _selectedItems2: kendo.data.Model[] = [];
    protected _currentItem2: kendo.data.Model;
    public currentI: any;
    protected $viewAddWin: JQuery;
    protected detail: string;
    constructor(
        protected c: { new(): kendo.data.Model },
        protected dataSource: kendo.data.DataSource,
        protected queryForm: kendo.data.ObservableObject,
        editFormId: string,
        detailId: string,
        //子表格
        protected d: { new(): kendo.data.Model },
        protected detailSource: kendo.data.DataSource,
        protected dSuppQuerForm: kendo.data.ObservableObject,
        protected yearSource: kendo.data.DataSource,
        protected endUserSource: kendo.data.DataSource,
        protected proClassSource: kendo.data.DataSource,
        protected proStatueSource: kendo.data.DataSource,
        protected exportUrl?: string,
        protected grid: any = $('#grid')
    ) {
        super(c, dataSource, queryForm, editFormId);
        this._currentItem2 = new d();

        this.$viewAddWin = $(`#${editFormId}detail`);
        this.permalink();
        this.detail = detailId;
    }
    // public onQuery(){
    //     super.onQuery();
    // }

    // get selectedItems2(): kendo.data.Model[] {
    //     return this.get('_selectedItems2');
    // }

    // set selectedItems2(selected: kendo.data.Model[]) {
    //     this.set('_selectedItems2', selected);
    // }

    get currentItem2(): kendo.data.Model {
        return this.get('_currentItem2');
    }

    set currentItem2(selected: kendo.data.Model) {
        this.set('_currentItem2', selected);
    }
    // public onQuery() {
    //     if (this._selectedItems.length != 0) {
    //         this.detail = this._selectedItems[0].get('projcode');
    //     }
    // }
    public permalink() {

        if (this._selectedItems.length != 0) {
            this._currentItem.set('projcode', this._selectedItems[0].get('projcode'));
            alert(this._currentItem.get('projcode'));
            this.detailSource.read();
            this.$viewAddWin
                .data('kendoWindow')
                .title('数据字典新增')
                .open()
                .center();
        }
    }
    public onEdit(e: kendo.data.Model) {
        this.currentItem2 = e;
        $(`#${this.editFormId}detail`)
            // $(`#${this.editFormId}Upload`)
            .data('kendoWindow')
            .title('数据字典新增')
            .open()
            .center();
    }
}


//SupplierModule  page
import uniqueId from 'lodash-es/uniqueId';
import DataSourceFactory from '../../components/DataSourceFactory';
import { supplier, supplierQueryForm } from './Supplier';
import template from './SupplierView.hbs';
import SupplierViewModule from './SupplierViewModule';
import { detSupplier, detSuppQuerForm } from './DetailSup';
import { V4MAPPED } from 'dns';
let datacode: any;
let grid: any;
let gridget: any; //grid ref
let cell: any; // selected td
let row: any; //selected tr
let row_uid: any; //uid of selected row
let cell_index: any; //cell index 0 based
let row_index: any; //row index 0 based
let row_data: any;
var check_res: any;
export default class SupplierModule implements Module {
    setup(el: JQuery, params: object): void {
        const editFormId = uniqueId('editForm');
        const detailId = uniqueId();
        el.append(
            template({
                height: el.height() - 95,
                height2: el.height() * 0,
                editFormId,
                detailId,
            })
        );

        const gridheight: any = el.height() - 95;
        const queryForm = new supplierQueryForm();
        const dSuppQuerForm = new detSuppQuerForm();

        const url = '/api/table/projmain/seljmain'; //上传下载路径
        const durl = '/api/table/projmain/selDetProjMain'; //详情
        const dataSource = DataSourceFactory.createDefault(url, supplier, queryForm);
        const detailSource = DataSourceFactory.createNoRoot(durl, detSupplier, dSuppQuerForm);
        const yearSource = DataSourceFactory.createBaseFrontNoRoot('/api/table/combolist/proyear');
        const endUserSource = DataSourceFactory.createBaseFrontNoRoot(
            '/api/table/combolist/useorg'
        );
        const proClassSource = DataSourceFactory.createBaseFrontNoRoot(
            '/api/table/combolist/proclass'
        );
        const proStatueSource = DataSourceFactory.createBaseFrontNoRoot(
            '/api/table/combolist/porstatue'
        );
        const exportUrl = '/api/table/projmain/excel';

        grid = $('#grid').kendoGrid({
            dataSource: dataSource,
            selectable: "multiple",
            height: gridheight,
            scrollable: true,
            filterable: true,
            pageable: {
                pageSizes: [20, 50, 100],
                pageSize: 20,
                refresh: true
            },
            columns: [
                { field: 'id', 'title': '序号', 'width': 100 },
                { field: 'projcode', title: '项目编号', width: 100, template: '<U>#: projcode # </U>' },
                // function(){
                //        return "<a href=''><strong>#: projcode # </strong></a>";
                // }}, //,template:"<strong>#: projcode # </strong>"
                { field: 'projname', title: '项目名称', width: 100 },
                { field: 'projyear', title: '年度', width: 80 },
                { field: 'protypecode', title: '项目类别', width: 100, hidden: true },
                { field: 'protypename', title: '项目类别', width: 100 },
                { field: 'projworkcontent', title: '作业内容', width: 320 },
                { field: 'projpersoncount', title: '定员人数', width: 100 },
                { field: 'projmoney', title: '项目总数', width: 100 },
                { field: 'proorgcode', title: '用工单位', width: 100, hidden: true },
                { field: 'proorgname', title: '用工单位', width: 100 },
                { field: 'prostatuecode', title: '项目状态', width: 100, hidden: true },
                { field: 'prostatuename', title: '项目状态', width: 100 }
            ]
            // ,change:function(e){
            //     gridget = e.sender; //grid ref
            //     cell = gridget.select(); // selected td
            //     row = cell.closest('tr'); //selected tr
            //     row_uid = row.attr('data-uid'); //uid of selected row
            //     cell_index =cell.index(); //cell index 0 based
            //     row_index =row.index(); //row index 0 based
            //     row_data =gridget.dataItem(row).toJSON(); //selected row data
            // }
        });
        // // 单击行事件
        var clickE = grid.on('click', '.k-grid-content tr', function (this: JQuery, arg: any) {
            // 获取当前选择行数据
            var gridid = grid.data("kendoGrid");
            var rownum = $(this).closest("tr");
            var rowIdnum = $("tr", gridid.tbody).index(rownum);
            var colIdnum = arg.toElement.cellIndex;
            var rowdataget = grid.data("kendoGrid").dataItem(rownum);
            var projcode = rowdataget.get("projcode");
            // datacode = row_data;

            if (colIdnum == undefined) {
                colIdnum = arg.toElement.parentElement.cellIndex;
            }
            if (projcode != null && colIdnum == 1) {
                selDetail(detailSource, projcode, vm);
                // $(`#${editFormId}detail`)
                // .data('kendoWindow')
                // .title('数据字典新增')
                // .open()
                // .center();
            }
            else {

            }
        });

        // // 双击行事件
        // grid.on('dblclick', '.k-grid-content tr', function () {
        //     // 获取当前选择行数据
        //     var row = grid.data("kendoGrid").select();
        //     var aa = grid.data("kendoGrid").editRow;
        //     var data = grid.data("kendoGrid").dataItem(row);
        //     alert(row + "/" + aa + "" + data);
        // });
        const vm = new SupplierViewModule(
            supplier,
            dataSource,
            queryForm,
            editFormId,
            detailId,
            //子表格
            detSupplier,
            detailSource,
            dSuppQuerForm,
            yearSource,
            endUserSource,
            proClassSource,
            proStatueSource,
            exportUrl,
            grid
        );
        el.on('click', 'button.edit-item', vm.permalink.bind(vm));
        // el.clone(check_res,vm.currentI);

        kendo.bind(el, vm);
    }
}

function selDetail(detailSource: any, projcode: any, vm: SupplierViewModule) {
    // let e: kendo.ui.UploadSuccessEvent;
    $.ajax({
        async: false,
        type: 'post',
        url: '/api/table/projmain/selDetProjMain',
        data: JSON.stringify({
            projcode,
        }),
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
    }).done((e) => {
        check_res = e;
        if (e != undefined) {
            // detSuppQuerForm.bind(e);
            detSupplier.bind(e);
        }
        // detailSource.read();
    });
    // vm.currentItem2.bind("selected",check_res);
    // vm.currentItem2.bind("_currentItem2",check_res);
    // vm.currentItem2.bind("projname",check_res.projname);
    // vm.currentItem2.bind("projyear",check_res.projyear);
    vm.onEdit(check_res);
    // vm.permalink();
    return check_res;
}

此处是实体类页面不添加了

显示样式如下：

 

 点击如下：

由于项目中模板，返回值一直出不来，古董了好久才出来啊真是。 

孤城冰
关注
专栏目录
handlebars-spring-boot-starter：车把的Spring Boot自动配置
01-30
添加handlebars-spring-boot-starter作为依赖项： repositories { mavenCentral() } dependencies { compile ' pl.allegro.tech.boot:handlebars-spring-boot-starter:0.3.2 ' } 要求 由于版本0.3.0 handlebars-...
kendo selectable选中事件
KinanyiCui的博客
10-09 412
网上搜了半天都是同一篇文章，绝了，自己记录一下 监听kendo的点击事件获取当前选中的行，需要啥data点出来就行。 $("#rowSelection").on('click',function(){ var row =$("#rowSelection").data("kendoGrid").select(); var data = $("#rowSelection").data("kendoGrid").dataItem(row); }) ...
kendo ui grid选中行事件，获取combobox选择的值
weixin_34146410的博客
08-23 1227
背景： 以前用 telerik ui做的grid现在又要换成kendo ui，不过说句实话kendo ui真的比telerik好多，可以说超级升级改头换面。当然用的mvc的辅助方法，以前的telerik ui 选中行的事件是 .OnRowSelect("SelectRow”) ，换成kendo ui 选中行的事件是 .Events(p=>...
Kendo UI 绑定行点击事件
Dr.Monster小站
04-04 2684
在网上找了好久,一堆乱七八糟的方法说怎么绑定事件之类的东西,全部试了一遍,整个人都要绝望了.一个人孤孤单单地抱着电脑,抽着烟在天台享受着日光和微风,思考着我的人生在哪里.想想即将来到的清明节,我有一丝惆怅.然鹅,一切都是那么的不经意,冥冥之中感觉到了即将发生的事,然后我打开了知乎,刷起了段子.在下班的那一刻,我熟练地打完卡,然后狠狠地盖上了电脑,心里咒骂着,qnmd.然后轻轻地走,不带走一丝哀愁....
KendoUI Grid分组、分页控件参数记录
GoodIdea
12-23 2270
$('#grid').kendoGrid({ dataSource:{ transport:{ read:{ //读取 url:"", //请求地址 type:"POST", //请求方法 POST GET dataType:"json" //数...
handlebars+kendo ui 编辑grid单元格点击事件
woyizhizaizhaoni的专栏
10-12 432
.hbs page <form> <table> <tr> <td> <label style="display:inline-block;width:70px">项目年度&...
前端开源库-handlebars-helper-repeat
08-30
"handlebars-helper-repeat" 是一个专门为Handlebars设计的开源库，用于在模板中实现循环和重复的功能。 这个库的核心功能是提供一个助手函数，它能够在一个块内部重复渲染指定次数。在传统的Handlebars语法中，...
handlebars-html-parser:解析车把和HTML
04-30
handlebars-html-parser 解析车把和HTML。 解析一下： < tag> value {{{ obj.value } ~}} </ tag> 到这个： [ { type : "htmlTagStart" } , { type : "htmlTagNameStart" } , { type : "literal" , value : "tag" } ...
H-ui.admin_v2.3.1
03-06
html5 后台管理系统H-ui.admin_v2.3.1版本。 根目录 ...) ...│ robots.txt 搜索引擎爬虫配置文件 ...│ member-开头的 用户相关 ...│ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
convert-handlebars:使用handlebars-to-jsx的简单UI
04-14
这是一个用引导的项目。 入门 首先，运行开发服务器： npm run dev # or yarn dev 用浏览器打开以查看结果。 您可以通过修改pages/index.js来开始编辑页面。 页面在您编辑文件时自动更新。...要了解有关Next.js的更...
（3）kendo UI使用基础介绍与问题整理——Grid问题/ Checkbox selection
weixin_34327223的博客
01-09 580
kendo UI的grid提供了选中行的功能，先上一张官网的截图： 一、简单说明 selectable 可选参数 "row" - the user can select a single row. 行 "cell" - the user can select a single cell. 项 "multiple, row" - the user can s...
Kendo UI：Grid 表格组件
baiduwenku112的博客
10-27 571
官网：http://www.telerik.com/kendo-ui 简介：KendoUI 是用jQuery 开发的UI 框架，主要用于各种数据展示。 经典示例：Grid 表格组件 代码： <!DOCTYPE html> <html> <head> <title>Grid组件</title> <link rel="stylesheet" href="../styles/kendo.common.min.css" /&
Kendo-UI学习 数据表格grid属性说明（一）
热门推荐
CNOYG的博客
08-07 1万+
kendoUI-Grid属性说明： allowCopy： Boolean | Object 是否启用表格复制，该属性默认为false,标识禁用复制功能。设置为true时，可以使用鼠标选中需要的表格数据进行复制。 altRowTemplate：String | function 是否启用自定义表格行级样式模版，可以自定义需要显示的表格样式。 autoBind: Boolean 是否启用自动绑定...
kendoui+css+全局设置,kendo ui - KENDOUI Grid - how to add class - Stack Overflow
weixin_31663397的博客
08-04 155
I initialize the table as follows:data-role="uigrid"data-scrollable="false"data-checkbox="true"data-pageable="true"data-class="zebra"data-bind="source: orders, events : { selectionChanged: selectionCh...
handlebars+kendo-ui grid单元格点击事件(一）
woyizhizaizhaoni的专栏
09-29 747
<form> <label style="display:inline-block;width:70px">项目年度</label> <input style="width: :160px" data-role="dropdownlist" data-text-field="year" data-value-field="id" ...
js模板加载script模板如何绑定事件以及事件属性的解决办法
u013018357的博客
09-09 6314
在html页面上有一段script的模板，给a标签添加绑定click事件 <script type="text/x-handlebars-template" id="waterfall-tpl"> {{#result}} <div class="item"> <a href="javascript:;" data
Handlebars js模版
Jin's blog
09-03 1万+
参考Handlebars网站：http://handlebarsjs.com/ 首先下载handlebars-1.0.0.beta.6.js和jquery-1.7.1.min.js 1）、最简单的Handlebars模版使用。 首先创建handlebarExample.html。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran
Handlebarst通过ajax加载模块内容
软件维修师
10-26 804
2018-10-26 重庆-传说 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&amp;gt; &amp;lt
Handlebars学习之——块表达式
azureternite的专栏
11-14 5807
Block helper可以让你自定义迭代器和其他可以传入新的上下文的功能基本块Block helper的定义方法是：在一个mustache中，以#开头，后面跟着helper的名称，然后对应的在一个mustache中以/开头，加上相同的名称作为这个块的结尾。形如：{{#hello}} {{item}} {{/hello}}在helper中，function接收一个hash参数options，而o
监听拼接模板元素的点击事件
最新发布
09-28
在前端开发中，监听HTML元素的点击事件通常是在JavaScript或相关的库（如React、Vue等）中进行的。如果你使用的是原生JavaScript，你可以这样做： ```javascript // 获取模板中的元素 var element = document.getElementById('your-template-element'); // 添加点击事件监听器 element.addEventListener('click', function(event) { // 在这里处理点击事件 console.log('Element clicked!'); }); ``` 在这个例子中，`getElementById`用于获取具有指定ID的元素，然后`addEventListener`被用来添加一个点击事件处理器，当用户点击该元素时，将会执行传入的回调函数。 如果你使用的是模板引擎（如Handlebars、Mustache等），它们可能会提供类似的方法来绑定事件，但基本思路是一样的，只是操作的语法会有所不同。例如，在Handlebars中，你可能需要先创建一个组件并注册事件处理器： ```handlebars <!-- HTML模板 --> <button id="template-btn" onclick={{onClick}}>点击我</button> <script> let template = Handlebars.compile(templateString); const container = document.getElementById('container'); container.innerHTML = template({ onClick(e) { console.log('Button clicked'); } }); </script> ``` 这里，`onclick={{onClick}}`是将`onClick`方法绑定到按钮的点击事件上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值