未加星标

JET Composite Components X - Custom Property Parsing

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
Introduction

In Part IV of this series, I discussed how the Composite Component framework was capable of carrying out basic parsing tasks to manage the conversion of string values, supplied in the tag attribute, to the type defined in the Composite Component metadata. We saw how basic conversion can take place to both primitives, arrays and simple objects. In some cases, however, you may need to carry out a more sophisticated parsing task, maybe where the supplied object is missing defaults or a string needs formatting / conversion.

One way that you could achieve this by defining the attribute as a simple string and then managing the parse within your property processing. The Composite Component Architecture, however, does provide a slightly more elegant approach by allowing your component to specify a custom parsing function. This article discusses this mechanism.

Plugging in a Custom Property Parser

You specify the use of a custom parser as part of the register() function for the Composite Component. In the previous examples of the register() call we've seen how this looks in broad terms:

oj.Composite.register('tag name',{configuration properties}); The custom parsing function is simply added as an additional property to the configuration properties argument (and is of course optional). So here's a version of the register call with the new configuration property parseFunction added: oj.Composite.register('ccdemo-name-badge',
{
metadata: {inline: JSON.parse(metadata)},
viewModel: {inline: ComponentModel},
view: {inline: view},
css: {inline: css},
parseFunction:customParseFunction
}); So in this case I've added the name of a function to do the parsing - customParseFunction . This function can be placed anywhere that is accessible in / from the loader script. If it is simple enough you can also define the function anonymously inline: oj.Composite.register('ccdemo-name-badge',
{

parseFunction: function(value, name, meta, defaultParseFunction){

})
}); Once defined, this parsing function will be called for every tag attribute that is being passed to the Composite Component, except for those bound to observables through {{...}} and [[...]] which bypass this parsing all together. Defining a Custom Parse Function

The custom property parse function takes four parameters:

value - the string value supplied for the tag attribute being processed name - the name of the property ( not the mapped tag attribute, ) being processed meta - the metadata definition for the property that is being processed. This gives you access to information such as type, the default value and any extension metadata defaultParseFunction - a handle to the default framework parsing function, so that you can pass-though properties that you don't have any special processing for. As an example let's imagine that I have a Composite Component that allows the user to specify a range for a metering component based on a start month, (with the end date being the current date): {
"properties" : {
"fromMonth" : {
"description" : "Start of display range",
"type" : "date"
},
"utility" : {
"description" : "gas | electricity",
"type" : "string"
}
}
} Used thus: <ccdemo-meter-display from-month="10" utility="gas"/> Internally I want to convert the numerical value for from-month into a date object. Here's what the parse function might look like: function (value, name, meta, defaultParseFunction) {
if (name === 'fromMonth'){
var year = new Date().getFullYear();
return new Date(year,value-1,1);
}
else {
//Pass through to the default processing
return defaultParseFunction(value);
}
}

Note how I use the name argument of the function to decide if special processing is needed for this property, or if the default conversion routine should be used via defaultParseFunction . You could also use some of the other information provided to the function to manage this process, for example the metadata injected through the meta parameter.

The value returned by the custom function is assigned to the relevant property and will then be made available via the props promise and $props to the Custom Component. This property parsing takes place in the lifecycle before either the viewModel instance is created (or the initialize method called if a singleton viewModel is being used).

What's Next?

In the next couple of articles I'll be examining some advanced topics, the extension of CCA metadata and the use of promises in the ojComposite.register() API.

CCA Series Index

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: function,Composite,name,property,value,parsing
分页:12
转载请注明
本文标题:JET Composite Components X - Custom Property Parsing
本站链接:http://www.codesec.net/view/530377.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(45)