Обрезать наблюдаемый массив во время привязок

Question

У меня есть наблюдаемое, что я свяжусь в id моего div. Как удалить пробелы и специальный символ во время привязок.

<div class="panel-group" id="accordion"> 
      <div class="panel panel-default" data-bind="foreach:ScheduleClauseArray"> 
       <div class="panel-heading" > 
        <h4 class="panel-title"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-bind="attr: { href : '#' + ScheduleClause.trim()}, text:ScheduleClause">Collapsible Group Item #1 
         </a> 
        </h4> 
       </div> 
       <div data-bind="attr: {'id': ScheduleClause.trim()}" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         Anim pariatur cliche reprehenderit, enim eiusmod high 
        </div> 
       </div> 
      </div>     
     </div>  

Answer 1

Got It .. Мне просто нужно создать вычислен наблюдаемым в моем ViewModel и называем это! рассчитанные в моих привязках

setUpViewModel.sanitizeScheduleClause = function (scheduleClause) { 
    var s = scheduleClause.split(' ').join(''); 
    return s.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ''); 
}.bind(setUpViewModel); 

Вот HTML

<div class="panel-group" id="accordion"> 
      <div class="panel panel-default" data-bind="foreach:ScheduleClauseArray"> 
       <div class="panel-heading" > 
        <h4 class="panel-title"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-bind="attr: { href : '#' + setUpViewModel.sanitizeScheduleClause (ScheduleClause)}, text:ScheduleClause">Collapsible Group Item #1 
         </a> 
        </h4> 
       </div> 
       <div data-bind="attr: {'id': setUpViewModel.sanitizeScheduleClause (ScheduleClause)}" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         Anim pariatur cliche reprehenderit, enim eiusmod high 
        </div> 
       </div> 
      </div>     
     </div>   

Answer 2

Вы могли бы сделать вычислен наблюдаемым:

self.ScheduleClause = ko.observable("testId"); 
self.trimmedScheduleClause = ko.computed(function(){ 
    return $.trim(self.ScheduleClause()); 
}, self); 

, а затем:

data-bind="attr: {'id': trimmedScheduleClause}"