Knockout.js通過PARAMS自定義組件

我已經做了以下的自定義組件爲我knockout.js項目：Knockout.js通過PARAMS自定義組件

呈現以下文字：

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

但由於某種原因，我無法設法正確地將參數傳遞給我的視圖模型。

來源

2017-04-20 Dimitrios Desyllas

所有的變化首先在該消息中獲取與呈現：

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

來源

2017-04-20 15:00:29

Knockout.js通過PARAMS自定義組件

回答

相關問題