fish模块化

0x00 模块化开发

    首先需要引入模块化js用来处理模块化的加载开发

    <script type="text/javascript" src="frm/fish-desktop/js/fish-desktop-require.js" data-main="main.js?v=1.0.0"></script>

然后需要进行主视图IndexView.js的渲染，之后就可以定义模块了

define(['./person'], function (person) {
  return {
    echo: function () {
      console.log(person.getName());
    }
});

定义需要依赖的模块

define(['./person'], function (person) {
  return {
    echo: function () {
      console.log(person.getName());
    }
});

使用require引入模块

require(['./a, ./b'], function (a, b) {
  // do something
});

by the way，define定义的模块主要用来声明国际化文件，接口层的方法以及一些第三方脚手架或者模版插件。

0x01 模板语法

    fish模板语法基于Handlebars，这里使用视图组件进行演示

    首先是变量赋值，变量赋值使用{{}}

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
var template = '<div class="entry">\n' +
    '  <h1>{{title}}</h1>\n' +
    '  <div class="body">\n' +
    '    {{body}}\n' +
    '  </div>\n' +
    '</div>\n';
// 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
        title: 'i am parent',
        body: 'this is a body'// 这里如果带上html标签不需要转义
    }
});
// 父视图渲染
var parentView = new ParentView().render();

    然后是段落赋值

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
//等效于  Shown.
// {{#if person}}
//   Never shown!
// {{/if}}
var template = 'Shown.\n' +
    '{{#person}}\n' +
    '  Never shown!\n' +
    '{{/person}}\n'
// 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
        person: false
    }
});
// 父视图渲染
var parentView = new ParentView().render();

然后是函数赋值

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
//
var template = '{{#data}}{{../fn this}}{{/data}}\n' // 参数就是跟在/fn后面的值
// 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
        fn: function(name) {
            return new Handlebars.SafeString('<p>' + name + '</p>'); // 这里使用这个返回Handlebars便不会转义参数
        },
        data: ['huang', 'xing', 'hui']
    }
});
// 父视图渲染
var parentView = new ParentView().render();

属性路径赋值

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
//
var template = '<div class="entry">\n' +
    '  <h1>{{title}}</h1>\n' +
    '  <h2>By {{author.name}}</h2>\n' +
    '</div>\n' +
    '<h1>Comments</h1>\n' +
    '\n' +
    '<div id="comments">\n' +
    '  {{#each comments}}\n' +
    '  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>\n' +
    '  {{/each}}\n' +
    '</div>' 

// 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
        title: 'Person',
        author: {
            name: 'Lilei'
        },
        permalink: 'http://fish.iwhalecloud.com',
        comments: [
            { id: 1, title: 'fish-desktop' },
            { id: 2, title: 'fish-mobile' },
            { id: 3, title: 'fish-designer' },
            { id: 4, title: 'fish-topo' },
            { id: 5, title: 'fish-cli' }
        ]
    }
});
// 父视图渲染
var parentView = new ParentView().render();

用../可以返回上层获取属性

each循环

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
//
var template = '{{#each array}}\n' +
    '  {{@index}}: {{this}}\n' + // @index访问数组索引
    '{{else}}' +
    'nothing' + // 使用else可以处理异常情况
    '{{/each}}\n' +
    '\n' +
    '{{#each object}}\n' +
    '  {{@key}}: {{this}}\n' + // @key访问对象属性
    '{{/each}}\n'

// 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
        object: {
            git: 'git repository url',
            api: 'api url'
        },
        //array: ['fish-desktop', 'fish-mobile', 'fish-designer', 'fish-topo', 'fish-cli']
    }
});
// 父视图渲染
var parentView = new ParentView().render();

递归recursive

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
//
var template = '<ul>\n' +
    '  {{#recursive items}}\n' +
    '    <li>{{name}}\n' +
    '      {{#if items}}\n' +
    '        <ul>\n' +
    '          {{{recursive items}}}\n' +
    '        </ul>\n' +
    '      {{/if}}\n' +
    '    </li>\n' +
    '  {{/recursive}}\n' +
    '</ul>\n'

// 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
            items : [
                { name: "foo1" },
                { name: "foo2" },
                { name: "foo3", items: [
                        { name: "foo4" },
                        { name: "foo5" },
                        { name: "foo6", items: [
                                { name: "foo7" }
                            ]}
                    ]},
                { name: "foo8" }
            ]
    }
});
// 父视图渲染
var parentView = new ParentView().render();

条件判断ifcond

fish.View.configure({ manage: true, syncRender: true });
// 定义一个模板
//
var template = '<div class="entry">' +
    "{{#ifCond type '===' 'Y'}}" +
    "<h1>YES</h1>" +
    "{{else}}" +
    "{{#ifCond type '===' 'N'}}" +
    "<h1>NO</h1>" +
    "{{else}}" +
    "<h1>UNKNOWN TYPE</h1>" +
    "{{/ifCond}}" +
    "{{/ifCond}}" +
    "</div>"
        // 定义一个父视图
var ParentView = fish.View.extend({
    el: '#app',
    template: fish.compile(template),
    serialize: {
           type: 'Y'
    }
});
// 父视图渲染
var parentView = new ParentView().render();

注册助手Helpers----动态设置的id一般不会在{{}}中设置太复杂的方法。