@ artsy/ backbone- mixins (中文(简体) )
一个Backbone的库将一些常见域逻辑和Artsy API兔洞的 DRY相混. 内部在Artsy工作,但也许你会找到一些有用的模式.
安装
取决于您的项目版本的 Backbone 所以记住安装两者.
npm install backbone --save
npm install @artsy/backbone-mixins --save
使用量
函数由"Markdown","Image","Dimensions"等常见的功能集来命名空间.
_ = require 'underscore'
{ Markdown, Image } = require '@artsy/backbone-mixins'
class Artwork extends Backbone.Model
_.extend @prototype, Markdown
_.extend @prototype, Image
标记
{ Markdown } = require '@artsy/backbone-mixins'
class Artwork extends Backbone.Model
_.extend @prototype, Markdown
mdToHtml( atr) 数据
将属性转换为下标记
artist.mdToHtml('biography')
mdToHtmlTotext (ATTr) (英语)
将属性转换为标记下并逃出 html.
artist.mdToHtmlToText('biography')
html ToText( atr) (中文(简体) )
从属性中逃出 html.
artist.htmlToText('biography')
尺寸
{ Dimensions } = require '@artsy/backbone-mixins'
class Artwork extends Backbone.Model
_.extend @prototype, Dimensions
维度([可选 )
Arty的API中常见的维度结构类似 { dimensions: { in: "10 x 20" }, metric: "in" }。这为根据这些数据输出格式化的维字符串提供了一个方便的方法。 通过一些选项来改进格式.
artist.set { dimensions: { in: "10 x 20 in", cm: '13 1/2 x 24 2/3 cm' }, metric: "in" }
artist.dimensions() # '10 x 20 in'
artist.dimensions(metric: 'cm') # 13 1/2 x 24 2/3 cm
artist.dimensions(metric: 'cm', format: 'superscript') # 13 ½ x 24 ⅔ cm
artist.dimensions(metric: 'cm', format: 'decimal') # 13.5 x 24.33 cm
选项。量: (“ in” 或“ cm” )(默认为 @get('metric')(中文(简体) )
artist.dimensions(metric: 'cm')
选项.format: “上标”
将 10 3/4 转换成上标 html 如 10 <sup>3/4</sup>。 。 。 .
artist.dimensions(format: 'superscript')
选项.格式:“十进制”
将作为分数出现的不完全格式化的公制维度转换成适当的公制小数格式.
artist.dimensions(format: 'decimal')
获取
记得在艺术url通过.
{ Fetch } = require '@artsy/backbone-mixins'
{ ARTSY_URL } = require('sharify').data
class Artworks extends Backbone.Collection
_.extend @prototype, Fetch(ARTSY_URL)
获取 Until End( 选项)
对于 pagized 路由, 获取收藏的url 直至端点返回0 结果.
artworks.fetchUntilEnd success: ->
# Phew... I have all the artworks from Artsy
它尊重数据参数如页面( 如果您在服务器上获取页面 1 和 fetchUntil 例如客户端的结尾)
# I already rendered page 1 from a `fetch`...
artworks.fetchUntilEnd
data:
page: 2
size: 20
success: ->
# I now have artwork 21 - the end
获取项目集ByKey( 关键, 选项)
以按键获取一个集,并用第一个结果填充收藏.
featuredLinks.fetchSetItemsByKey 'homepage:featured-sections', success: ->
featuredLinks.first().get('name').should.equal 'Magnum Photos'
阿托兹
{ AToZ } = require '@artsy/backbone-mixins'
class Artworks extends Backbone.Collection
_.extend @prototype, AToZ
组合ByAlpha ()
根据 alphaSortKey 函数。 如果没有 alphaSortKey 函数在模式上默认为 @get 'sortable_id'。 。 。 .
样本输出 :
{
'0-9': [ model_instance, model_instance, model_instance ],
A: [ model_instance, model_instance, model_instance ],
// ...
Z: [ model_instance, model_instance, model_instance ]
}
artworks.model.alphaSortKey = -> @get 'title'
artworks.groupByAlpha()
groupBy AlphaWith Columns( [数 Columns] ) 组合
以适合在 A-Z 列表中渲染的格式组集输出,并指定列数 。 模式必须执行 href 财务报告和审定财务报表 displayName 方法.
样本输出 :
[
{ letter: '0-9', columns: [ ... ] },
{ letter: 'A', columns: [ ... ] },
...
{ letter: 'Z', columns: [ ... ] }
]
// Each column is a 2D array of objects with `href`, and `name` properties:
columns: [
[ { href: '...', name: '...' }, ... { href: '...', name: '...' } ],
[ { href: '...', name: '...' }, ... { href: '...', name: '...' } ],
[ { href: '...', name: '...' }, ... { href: '...', name: '...' } ]
]
artworks.model.href = -> "/artwork/#{@get 'id'}"
artworks.model.displayName = -> @get 'title'
artworks.groupByAlphaWithColumns()
图像
{ Image } = require '@artsy/backbone-mixins'
class FeaturedLink extends Backbone.Model
_.extend @prototype, Image
图像Url( [版本])
Artsy API 经常构建像这样的图像数据 { image_url: 'foo/bar/:version.jpg' } 这种方法将返回带有合理默认值的已替换字符串.
featuredLink.imageUrl('small')
缺少图像Url ()
imageUrl 使用该 missingImageUrl 在模型上,当它无法在数据中找到一个版本时,知道要显示什么图像。 默认为 /image/missing_image.png。 。 。 .
默认图像Version ()
告诉 imageUrl 首先要寻找哪个版本。 默认为 image_versions 或者说 versions 属性.
图像( 版本)
检查 image_versions 或者说 versions 属性用于图像版本并返回真/假.
最佳图像Url( [版本])
返回图像 URL, 选择较早的版本 versions 如果有的话,但以其他方式贬低后面的人。 最终,降解为 missingImageUrl。 。 。 .
feature.bestImageUrl(['large', 'medium', 'small'])
日历 Urls
{ CalendarUrls } = require '@artsy/backbone-mixins'
class FairEvent extends Backbone.Model
_.extend @prototype, CalendarUrls({address: 'venue_address', title: 'name'})
谷歌卡伦达Url( )
制作一个url来创建谷歌日历事件.
event.googleCalendarUrl()
雅虎卡伦达乌尔尔( )
制作url来创建雅虎日历事件.
event.yahooCalendarUrl()
参数( )
制作创建 Outlook 和 iCal 日历事件的url .
event.ics()
捐款
请将工程叉开并提交带有测试的拉力请求. 安装节点模块 npm install 进行测试 npm test。 。 。 .
许可证
麻省理工学院