{"_id":"@beisen/ux-talent-no-require","_rev":"6-fe95f58c1224f9087a359c85fc8c4de7","name":"@beisen/ux-talent-no-require","description":"Beisen TalentJS Framework","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@beisen/ux-talent-no-require","author":{"name":"xuchengyun","email":"xuchengyun@beisen.com"},"description":"Beisen TalentJS Framework","main":"index.js","configFile":"UXStaticSharedConfig","configApp":"","configUser":"ux","grayConfigFile":"UXStaticSharedConfigGray","grayConfigApp":"","version":"1.0.1","dependencies":{"grunt":"~0.4.1","grunt-contrib-watch":"~0.4.3","grunt-contrib-jst":"~0.5.0","grunt-contrib-connect":"~0.5.0"},"devDependencies":{"grunt-contrib-requirejs":"^0.4.4","grunt-contrib-symlink":"~0.3.0","grunt-preprocess":"~3.0.1","load-grunt-tasks":"~0.5.0"},"directories":{"doc":"docs"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-js/ux-talent.git"},"license":"ISC","gitHead":"034be9ebaabfadbc2847464207d6ecacc2ce866b","_id":"@beisen/ux-talent-no-require@1.0.1","_shasum":"f1088a0c79839d6a895523c407a8f6bd4f0f9b3b","_from":".","_npmVersion":"3.8.3","_nodeVersion":"5.10.1","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"shasum":"f1088a0c79839d6a895523c407a8f6bd4f0f9b3b","tarball":"https://registry.npmjs.org/@beisen/ux-talent-no-require/-/ux-talent-no-require-1.0.1.tgz","integrity":"sha512-aTf7Ba46WiZYsmdAPP00W95mvmg029cE49TzVr4K0yOPsVXpYA0U2jdL8Ke2b5HqpdeiOg7oxnfy0eecrLeGUg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6iNK5GrAicbEuDLIKCMYyfdOuYlxQMSpAp4xBptzqWAIgFkWeLeEktScvzVcYSMVtG+wU93AS7KzqF5wE4mdjABU="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ux-talent-no-require-1.0.1.tgz_1509085810950_0.5822193780913949"}}},"readme":"# TalentJS Framework\n## 本地运行\n* 安装[nodejs](http://ux.beisen.co/redmine/attachments/download/2/node-v0.8.18-x64.msi)；\n* 安装bower和grunt：`npm -g install bower grunt-cli`；\n* 获取项目源码：`git clone <项目地址>`；\n* 进入项目源码目录；\n* 安装node modules：`npm install`；\n* 安装JS库：`bower install`；\n* 运行项目：`grunt server`在本地8000端口启动server，并在默认浏览器打开起始页面；\n\n\n## 编码规范\n- 文件命名: 小写，中划线分隔；\n- 文件格式：utf-8无BOM；\n- 代码缩进：tab, 4个空格的大小；\n- 变量：驼峰式写法，如: userName；\n- 类名：头字母大写，如：UserModel；\n- MVC所涉及的类，需要增加类型后缀，如：DetailView, JobsPageView, UserCollection；\n- 文件命名: 小写，中划线分隔，如: user-item-view.js, user-model.js；\n- 页面视图类的文件名全部为index-page-view.js；\n- 普通视图类的文件名全部为“-view.js”结尾；\n- 对于this的别名，请使用：var self = this；\n\n\n----------\n## 主要视图类的详细说明\n\n\n## ItemView\n\n### 简述\n\n用于简单地渲染一个模板。\n其render方法会将模板与数据绑定，并将结果渲染至$el中。\n\n### 使用示例\n\n```\nMyView=Talent.ItemView.extend({\n    template: jst['home/index-page']\n});\n```\n\n### 属性\n\n#### ui\n\n一组hash表，获取view对应模板内的dom元素。\n如下例所示，render前，this.ui.checkbox为字符串；render后，为jquery对象。\n\n```\nui:{\n    checkbox:\"input[type=checkbox]\"\n},\n,events:function(){\n    var events = {};\n    events['click ' + this.ui.checkbox] = 'clickHandler';\n    return events;\n}\nonRender: function() {\n    if (this.model.get('selected')) {\n        this.ui.checkbox.addClass('checked');\n    }\n}\n```\n\n#### modelEvents\n\n对model中发生的事件绑定相应的事件监听函数。\n\n```\nmodelEvents: {\n    \"change\":\"modelChanged\"\n}\n```\n\n#### collectionEvents\n\n对collection中发生的事件绑定相应的事件监听函数。\n\n```\ncollectionEvents: {\n    \"add\":\"modelAdded\"\n}\n```\n\n### 方法\n\n#### serializeData\n\n该方法用于处理向模板中传入的数据，它的返回值必须为json对象。\nItemView传入的model或collection数据不适合直接渲染时，可用该方法。\n\n```\nserializeData: function(){\n    return {\n        \"some attribute\": \"some value\"\n    }\n}\n```\n\n### 方法回调\n\n#### onRender\n\n该方法在render后执行。你可以向其中加入你希望在view render之后执行的代码。\n\n## CompositeView\n\n### 简述\n\n包含一个模板和一个可迭代区域。可迭代区域中的每个条目由ItemView负责渲染。\n\n### 使用示例\n\n```\nvar MyItemView = Talent.ItemView.extend({\n    template : Talent._.template('<li><%=text%></li>')\n});\nTalent.CompositeView.extend({\n    template : '<h1>Hello</h1><ul></ul>',\n    itemViewContainer : 'ul',\n    itemView: MyItemView\n});\n```\n\n### 属性\n\n#### itemView\n\n用于指定渲染每个迭代条目的视图类，其必须是ItemView的子类；必选参数；\n\n#### itemViewContainer\n\n用于指定迭代区域。该方法指定一个DOM节点，用来包含所有迭代条目。必选参数。\n\n#### itemViewOptions\n\n从compositeView中传入到itemView中的参数。\n\n```\nvar MyItemView = Talent.ItemView.extend({\n    initialize: function(options){\n        console.log(options.foo); // => \"bar\"\n    }\n});\n\nTalent.CompositeView.extend({\n    template : jst['common/todo-composite'],\n    itemViewContainer : 'ul',\n    itemView: MyItemView,\n    itemViewOptions : {\n        foo : \"bar\"\n    }\n});\n```\n\n当itemViewOptions中的值需要在运行时通过计算得出时，它也可以被定义为一个函数，必须返回一个对象。\n\n```\nTalent.CompositeView.extend({\n    itemViewOptions: functioin(model, index){\n        // 计算部分\n        return {\n            foo: \"bar\",\n            itemIndex: index\n        }\n    }\n});\n```\n\n#### emptyView\n\ncollection为空时在compositeView内渲染的视图类。\n\n#### children\n\n获取compositeView中所有的itemView\n\n\n### 方法\n\n#### buildItemView\n\n自定义itemView的实例化过程。\n\n```\nbuildItemView: function(item, ItemViewType, itemViewOptions){\n    // 为ItemView构建最终的参数列表\n    var options = _.extend({model: item}, itemViewOptions);\n    // 实例化\n    var view = new ItemViewType(options);\n    return view;\n}\n```\n\n#### appendHtml\n\n自定义itemView实例插入到dom结点的过程。\n默认情况下，compositeView把每个itemView添加到缓存元素中，在最后通过jQuery的.append方法把所有itemView添加到compositeView的el中。\n\n```\nTalent.CompositeView.extend({\n        //第一个参数是compositeView实例，\n        //第二个参数是当前itemView实例，\n        //第三个参数itemView对应的model在collection中的序号。\n    appendHtml: function(compositeView, itemView, index){\n        if (compositeView.isBuffering) {\n            //在事件重置和初始化渲染时缓存，减少向document插入元素的次数\n            compositeView.elBuffer.appendChild(itemView.el);\n        }\n        else {\n                        //如果compositeView已经被渲染，\n                        //直接把新的itemView添加到compositeView中\n            cmopositeView.$el.append(itemView.el);\n        }\n    }\n});\n```\n\n#### close\n\nclose方法执行以下操作 ：\n\n - 解除所有listenTo事件\n - 解除所有自定义view事件\n - 解除所有DOM事件\n - 解除所有已渲染的item views\n - 从DOM中移除this.el节点\n - 如果设置了onClose事件回调函数，调用onClose函数\n\n\n### 事件回调\n\n#### onRender\n\nview渲染完成后，对view对应的dom结构进行其它操作。\n\n#### onClose\n\n在view close后执行。\n\n#### onBeforeItemAdded\n\nitem实例即将被添加到compositeView之前执行。\n\n```\nonBeforeItemAdded: function(itemView){\n    //操作代码\n}\n```\n\n#### onAfterItemAdded\n\nitem实例被添加到compositeView之后执行。\n\n```\nonAfterItemAdded: function(itemView){\n    //操作代码\n}\n```\n\n#### onItemRemoved\n\n当item实例从compositeView中移除时执行。\n\n```\nonItemRemoved: function(itemView){\n    // 操作代码\n}\n```\n\n### 事件\n\n以下事件函数在相应事件发生时被调用。\n\n#### render\n#### closed\n#### before:item:added\n#### after:item:added\n#### item:removed\n\n```\nMyView = Talent.CompositeView.extend({...});\n\nvar myView = new MyView();\n\nmyView.on(\"render\", function(){\n    alert(\"the collection view was rendered!\");\n});\n\nmyView.on(\"colsed\", function(){\n    alert(\"the collection view was closed!\");\n});\n```\n\n```\nvar MyCV = Talent.CollectionView.extend({\n    // ...\n\n    onBeforeItemAdded: function(){\n        // ...\n    },\n\n    onAfterItemAdded: function(){\n        // ...\n    }\n});\n\nvar cv = new MyCV({...});\n\ncv.on(\"before:item:added\", function(viewInstance){\n    // ...\n});\n\ncv.on(\"after:item:added\", function(viewInstance){\n    // ...\n});\n\ncv.on(\"item:removed\", function(viewInstance){\n    // ...\n});\n```\n\n## Layout\n### 简述\n\n具有若干可局部刷新的区域(region)\n\n### 使用示例\n\n```\nMyLayout = Talent.Layout.extend({\n  template: \"#my-layout-template\",\n  regions: {\n    menu: \"#menu-bar\",\n    content: \"#main-content\"\n  } \n});\nvar myLayout = new MyLayout();\nmyLayout.render();\n//myMenu在这里可以是ItemView或CompositeView的实例\nmyLayout.menu.show(myMenu);\n```\n\n### 属性\n\n#### regions\n\n定义Layout中的Region。通过函数定义，该函数返回一个定义Region的对象。\n\n```\nregions: function(options){\n    return {\n        fooRegion: \"#foo-element\"\n    };\n}\n```\n\n### 方法\n\n#### show\n\n渲染view并将它添加到el元素中。\n\n#### addRegion \n\n向Layout中添加Region，一次只能添加一个。\n\n```\nvar layout = new MyLayout();\n\n// ...\n\nlayout.addRegion(\"foo\", \"#foo\");\n```\n\n#### addRegions \n\n向Layout中添加Region，一次可以添加多个。\n\n```\nvar layout = new MyLayout();\n\n// ...\n\nlayout.addRegions({\n    foo: \"#foo\",\n    bar: \"#bar\"\n});\n```\n\n#### removeRegion\n\n移除Layout中的Region。\n\n```\nvar layout = new MyLayout();\n\n// ...\n\nlayout.removeRegion(\"foo\");\n```\n\n### 自定义Region Type\n\n用于将默认的Region类替换为你自定义的Region类。\n\n```\nMyLayout = Talent.Layout.extend({\n    regionType: SomeCustomRegion\n});\n```\n\n也可以分别向每个region设置不同的Region类。\n\n```\nAppLayout = Talent.Layout.extend({\n    template: \"#layout-template\",\n\n    regionType: SomeDefaultCustomRegion,\n\n    regions: {\n        menu: {\n            selector: \"#menu\",\n            regionType: CustomRegionTypeReference\n        },\n        content: {\n            selector: \"#content\",\n            regionType: CustomRegionType2Reference\n        }\n    }\n});\n```\n\n## Region\n\n### 简述\n\n需要经常变动内部视图的区域。其最重要的特性为在改变内部视图后旧视图会从DOM中移除。\n\n### 使用示例\n\n```\nAppLayout = Talent.Layout.extend({\n    template: \"#layout-template\",\n\n    regions: {\n        menu: \"#menu\",\n        content: \"#content\"\n    }\n});\nvar layout = new AppLayout();\nlayout.render();\nlayout.menu.show(new MenuView());\nlayout.content.show(new MainContentView());\n```\n\n### 属性\n\n#### currentView\n\n设置绑定到Region中的view。该view不会渲染或显示。\n\n```\nvar myView = new MyView({\n    el: $(\"#existing-view-stuff\")\n});\n\nvar region = new Talent.Region({\n    el: \"#content\",\n    currentView: myView\n});\n```\n\n### 方法\n\n#### show\n\n渲染并将view添加到DOM树中。每次调用show方法时会自动调用close关闭旧view。可以通过{preventClose: true}参数阻止close行为。\n\n```\n// 显示myView\nvar myView = new MyView();\nMyApp.mainRegion.show(myView);\n\n// anotherView替换掉myView。自动调用close方法\nvar anotherView = new AnotherView();\nMyApp.mainRegion.show(anotherView);\n\n// anotherView2替换anotherView。阻止调用close方法\nvar anotherView2 = new AnotherView();\nMyApp.mainRegion.show(anotherView2, { preventClose: true });\n```\n\n#### reset\n\n自动关闭所有显示的view并删除缓存的el元素。region下一次显示view时，el重新从DOM中获取。\n\n#### open\n\n改变视图添加到region中的过程。\n默认的open方法为：\n\n```\nTalent.Region.prototype.open = function(view){\n    this.$el.empty().append(view.el);\n}\n```\n\n重写open方法添加其它效果\n\n```\nTalent.Region.prototype.open = function(view){\n    this.$el.hide();\n    this.$el.html(view.el);\n    this.$el.slideDown(\"fast\");\n}\n```\n\n#### attachView\n\n向Region中添加view，添加的view不会渲染或显示。\n\n```\nMyApp.addRegions({\n    someRegion: \"#content\"\n});\n\nvar myView = new MyView({\n    el: $(\"#existing-view-stuff\")\n});\n\nMyApp.someRegion.attachView(myView);\n```\n\n### 事件\n#### beforeShow\n\n当view已经渲染完成，但是尚未添加到DOM中时调用。\n\n#### show\n\nview渲染完成并添加到DOM中后调用。\n\n#### close\n\n当view被关闭之后调用。\n\n```\nMyApp.mainRegion.on(\"before:show\", function(view){\n  // manipulate the `view` or do something extra\n  // with the region via `this`\n});\n\nMyApp.mainRegion.on(\"show\", function(view){\n    // manipulate the `view` or do something extra\n    // with the region via `this`\n});\n\nMyApp.mainRegion.on(\"close\", function(view){\n    // manipulate the `view` or do something extra\n    // with the region via `this`\n});\n\nMyRegion = Backbone.Marionette.Region.extend({\n    // ...\n\n    onBeforeShow: function(view) {\n        // the `view` has not been shown yet\n    },\n\n    onShow: function(view){\n        // the `view` has been shown\n    }\n});\n\nMyView = Talent.ItemView.extend({\n    onBeforeShow: function() {\n        // called before the view has been shown\n    },\n    onShow: function(){\n        // called when the view has been shown\n    }\n});\n```\n\n#### 实例化自定义Region\n\n当我们想在应用运行之后向其中添加region时，就要按照上文中的方法扩展Region类，并在应用中实例化，如下所示：\n\n```\nvar SomeRegion = Talent.Region.extend({\n    el: \"#some-div\",\n\n    initialize: function(options){\n      // your init code, here\n    }\n});\n\nMyApp.someRegion = new SomeRegion();\n\nMyApp.someRegion.show(someView);\n```\n\n注意region必须要有一个元素与自身绑定，如果在添加region实例到应用或Layout中时没有指定选择器的话，在定义时也必须声明el属性。\n\n#### 添加自定义Region Types\n\n通过addRegions将自定义Region Type添加到应用中。\n\n```\nvar FooterRegion = Talent.Region.extend({\n    el: \"#footer\"\n});\n\nMyApp.addRegions({\n    footerRegion: FooterRegion\n});\n```\n\n也可以在添加时声明一个选择器。\n\n```\nvar FooterRegion = Talent.Region.extend({\n    el: \"#footer\"\n});\n\nMyApp.addRegions({\n    footerRegion: {\n        selector: \"#footer\",\n        regionType: FooterRegion\n    }\n});\n```\n","maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"time":{"modified":"2022-06-12T15:09:46.653Z","created":"2017-10-27T06:30:11.244Z","1.0.1":"2017-10-27T06:30:11.244Z"},"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-js/ux-talent.git"},"author":{"name":"xuchengyun","email":"xuchengyun@beisen.com"},"license":"ISC","readmeFilename":"README.md"}