具有計算屬性的敲除映射嵌套數組

Question

我需要計算一組日期時間的服務器端，以允許更改日期/時間客戶端。 下面的代碼按照加載服務器數據工作，並將我需要的iso字段添加到服務器上。

當用戶更改日期/時間輸入字段時，如何使iso字段可動態計算？

淘汰賽JS至今：

var ViewModel = function() { 
    var self = this; 
    // ...other first-level observables and funct 

    function scadenzeNuove(payload) { 
    ko.mapping.fromJS(payload, {}, this); 

    this.iso = ko.pureComputed(function() { 
       var data_re = /^(\d{2})\/(\d{2})\/(\d{4})T(\d{2}):(\d{2})/; 
       if (!payload.data) { 
        return false; 
       }; 
       var data_string = payload.data; 

       if (!payload.ora) { 
        data_string = data_string + 'T00:00'; 
       } else { 
        data_string = data_string + 'T' + payload.ora; 
       }; 

       var data_match = data_re.exec(data_string) ? data_re.exec(data_string) : false; 
       if (!data_match) { return false; }; 
       var data = new Date(data_match[3], data_match[2]-1, data_match[1], data_match[4], data_match[5]) 
       return data; 
    }, this); 

    }; 
    var scadenzeNuoveMapping = { 
     create: function(options) { 
      return new scadenzeNuove(options.data); 
     }, 
    }; 

    self.scadenzeNuove = ko.observableArray(); 
    self.compScadenze = function(form) { 
    $.getJSON('{{ compute_scadenza }}', $(form).serialize(), function(data){ 
     ko.mapping.fromJS(data, scadenzeNuoveMapping, self.scadenzeNuove); 
    }); 
    }; 
}; 
var vm = new ViewModel() 
ko.applyBindings(vm); 

HTML：

<div data-bind="if: scadenzeNuove"> 
     <ul data-bind="foreach: scadenzeNuove"> 
     <li> 
      <span data-bind="text: iso().toLocaleFormat()"></span> 
      <input type="text" name="n_data" data-bind="value: data"> 
      <input type="text" name="n_ora" data-bind="value: ora"> 
      <input type="text" name="n_desc" data-bind="value: desc"> 
     </li> 
     </ul> 
</div> 

Answer 1

我的錯：我所指靜態數據​​，而不是動態觀察的parent：

function ScadenzeNuove(payload) { 
    var parent = this; 
    ko.mapping.fromJS(payload, {}, parent); 

    parent.iso = ko.pureComputed(function() { 
     var data_re = /^(\d{2})\/(\d{2})\/(\d{4})T(\d{2}):(\d{2})/; 
     if (!parent.data()) { 
      console.log("Not entered any date"); 
      return false; 
     }; 
     var data_string = parent.data(); 

     if (!parent.ora()) { 
      data_string = data_string + 'T00:00'; 
     } else { 
      data_string = data_string + 'T' + parent.ora(); 
     }; 

     var data_match = data_re.exec(data_string) ? data_re.exec(data_string) : false; 
     if (!data_match) { 
      console.log('Not a valid date format'); 
      return false; 
     }; 

     console.log(data_match); 

     // Array [ "08/06/2017T23:50:00", "08", "06", "2017", "23", "50" ] 
     var data = new Date(data_match[3], data_match[2]-1, data_match[1], data_match[4], data_match[5]) 
     console.log(data.toLocaleFormat()); 
     console.log(data.getTimezoneOffset()); 
     return data; 
    }, parent); 


    parent.toCal = ko.observable(false); 
}; 

Answer 2

我會使用一個默認的構造函數從ISO串去一個視圖模型與分離的年，月，等觀測第一。

然後，您可以定義一個計算的isoString屬性，將它們重新組合到可發送到服務器的字符串中。

我強烈建議你要麼寫一些固體測試或使用moment.js，如果你與Date s工作...

const DateTimeSelection = function(isoString) { 
 
    const date = new Date(isoString); 
 
    
 
    this.year = ko.observable(
 
    date.getFullYear() 
 
).extend({ num: true }); 
 
    
 
    this.month = ko.observable(
 
    date.getMonth() 
 
).extend({ num: true }); 
 
    
 
    this.date = ko.observable(
 
    date.getDate() 
 
).extend({ num: true }); 
 
    
 
    this.hour = ko.observable(
 
    date.getHours() 
 
).extend({ num: true }); 
 

 
    this.isoString = ko.pureComputed(() => 
 
    new Date(
 
     this.year(), this.month(), this.date(), this.hour() 
 
    ).toISOString() 
 
); 
 
    
 
    this.hasChanged = ko.pureComputed(() => 
 
    this.isoString() !== isoString 
 
); 
 
}; 
 

 

 
ko.extenders.numeric = function(target) { 
 
    return ko.computed({ 
 
    read: target, 
 
    write: x => target(Number(x)) 
 
    }); 
 
}; 
 

 
const initialServerData = "2017-06-16T14:00:00.000Z"; 
 
const vm = new DateTimeSelection(initialServerData); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<input type="number" data-bind="textInput: year"> 
 
<input type="number" data-bind="textInput: month"> 
 
<input type="number" data-bind="textInput: date"> 
 
<input type="number" data-bind="textInput: hour"> 
 

 

 

 
<div data-bind="text: 'output ' + isoString()"></div> 
 
<div data-bind="ifnot: hasChanged" style="color: green">Has not been altered by user</div> 
 
<div data-bind="if: hasChanged" style="color: red">Has been altered by user</div>