Question

我为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 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>

该组件使用以下视图模型：

define(['jquery','knockout','compMessage'],function($,ko,messageConstants){

    function NotificationPopUpsViewModel()
    {
        var self=this;
        self.notifications=ko.observableArray([]);

        self.NOTIFICATION_INFO=function(){
            return messageConstants.INFO();
        };

        self.NOTIFICATION_SUCCESS=function(){
            return messageConstants.SUCCESS();
        };

        self.NOTIFICATION_FAIL=function(){
            return messageConstants.FAIL();
        };

        function NotificationPopUp(message,type)
        {
            var notification=this;          
            notification.type=ko.observable(type);
            notification.message=ko.observable(message);    
        }

        self.addNotification=function(nessage,type,ttl){
            var notificationPopUp=new NotificationPopUp(message,type);

            ttl=ttl||2000;

            self.notifications.push(notificationPopUp);
//          setTimeout(function(){
//              self.notifications.remove(notificationPopUp);
//          },ttl);
        };
    }


    return NotificationPopUpsViewModel;
})

我要整体呈现的html片段是：

<div id="message-area" class="col-xs-8" data-bind="with:notificationPopUpsViewModel">
    <!-- ko foreach: notifications -->
            <message params="this"></message>
    <!-- /ko -->
</div>

但由于某些原因，我无法将参数正确地传递到我的视图模型中。

Answer 1

首先更改消息的呈现位置：

<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>

然后使用ko.utils.unwrapObservable进入组件，即使给定的vvalue是可观察的，也可以获取值。导致这个组件：

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;}
    }
});

Knockout.js传递Params自定义组件

1 个答案: