Knockout.js传递参数自定义组件
我为我的knockout.js项目制作了以下自定义组件:Knockout.js传递参数自定义组件,knockout.js,Knockout.js,我为我的knockout.js项目制作了以下自定义组件: define(['knockout','jquery','text!js/components/message/templates/message.html'],function(ko,$,message){ var INFO='info'; var SUCCESS='success'; var FAIL='fail'; /** * A dismissive alert that carrie
define(['knockout','jquery','text!js/components/message/templates/message.html'],function(ko,$,message){
var INFO='info';
var SUCCESS='success';
var FAIL='fail';
/**
* A dismissive alert that carries the success of fail message
* @param string message
* @param type
*/
var messageBox=function(params){
var self=this;
self.message=ko.observable(params.message);
self.type=ko.observable('alert-info');
if(params.type){
switch(params.type){
case SUCCESS:
self.type('alert-success');
break;
case FAIL:
self.type('alert-danger');
break;
case INFO:
default:
self.type('alert-info');
}
}
}
ko.components.register('message',{
viewModel:messageBox,
template: message
})
//We return them as functions in order not to change the values
return {
"INFO":function(){return INFO;},
"SUCCESS":function(){return SUCCESS;},
"FAIL":function(){return FAIL;}
}
});
这将呈现以下文本:
<div class="alert alert-dismissible" data-bind="css:type" >
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<!-- ko if: type === 'alert-success' -->
<span class="glyphicon glyphicon-ok"></span>
<!-- /ko -->
<!-- ko if: type === 'alert-danger' -->
<span class="glyphicon glyphicon-remove"></span>
<!-- /ko -->
<p data-bind="text:message"></p>
</div>
我想整体呈现的html片段是:
<div id="message-area" class="col-xs-8" data-bind="with:notificationPopUpsViewModel">
<!-- ko foreach: notifications -->
<message params="this"></message>
<!-- /ko -->
</div>
但由于某些原因,我无法将参数正确地传递到视图模型中。首先更改消息的呈现位置:
<message params="{type:type(),message:message()}"></message>
<message params="{type:type(),message:message()}"></message>
<div id="message-area" class="col-xs-12 col-sm-8 col-md-6 col-lg-6" data-bind="with:notificationPopUpsViewModel">
<!-- ko foreach: notifications -->
<message params="{type:type(),message:message()}"></message>
<!-- /ko -->
</div>
define(['knockout','jquery','text!js/components/message/templates/message.html'],function(ko,$,message){
var INFO='info';
var SUCCESS='success';
var FAIL='fail';
/**
* A dismissive alert that carries the success of fail message
* @param string message
* @param type
*/
var messageBox=function(params){
var self=this;
self.message=ko.observable(ko.utils.unwrapObservable(params.message));
self.type=ko.observable('alert-info');
params.type=ko.utils.unwrapObservable(params.type)
if(params.type){
switch(params.type){
case SUCCESS:
self.type('alert-success');
break;
case FAIL:
self.type('alert-danger');
break;
case INFO:
default:
self.type('alert-info');
}
}
}
ko.components.register('message',{
viewModel:messageBox,
template: message
})
//We return them as functions in order not to change the values
return {
"INFO":function(){return INFO;},
"SUCCESS":function(){return SUCCESS;},
"FAIL":function(){return FAIL;}
}
});