Skip to content

处理组件的模板渲染,混入到 Widget 中使用。

Notifications You must be signed in to change notification settings

gazira/arale-templatable

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Templatable


spm package Build Status Coverage Status

处理组件的模板渲染,混入到 Widget 中使用。


使用说明

可混入的功能类,提供 Handlebars 模板支持。

var Templatable = require('templatable');

var MyWidget = Widget.extend({
    Implements: Templatable
});

var myWidget = new MyWidget({
    template: '<div><h3>{{title}}</h3><ol>{{#each list}}<li>{{item}}</li>{{/each}}</div>',
    model: {
        'title': '标题',
        'list': [
            { 'item': '文章一' },
            { 'item': '文章二' }
        ]
    },
    parentNode: '#demo'
});

myWidget.render();

Templatable 在渲染的时候会读取 this.get('model')this.get('template'),这两个是实例化的时候传入的,最终生成 this.element

this.get('template') 支持多种格式:

  1. html 的字符串

  2. id 选择器,最常用而且判断简单

  3. 函数,通过 handlerbars 编译过的模板

renderPartial .renderPartial(selector)

局部渲染,根据传入的 selector 参数,刷新匹配的区域。

默认无需覆盖。需要覆盖时,请使用 return this 来保持该方法的链式约定。

this.set('model', {
  title: '新标题'
});
this.renderPartial('h3');

templateHelpers

可以使用 handlebars 的 helper,由于 handlerbars 是全局注册,所以每次编译都会重新注册。

示例二

templatePartials

可以使用 handlebars 的 partials。

About

处理组件的模板渲染,混入到 Widget 中使用。

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%