Question

我有一个可观察的，我将绑定在我的div的id中。如何在绑定过程中删除空格和特殊字符。

 <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

你可以制作一个计算的可观察物：

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

然后：

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

Answer 2

得到它！..我只需要在我的viewmodel中创建一个计算的observable，并在我的绑定中调用该计算的observable

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>

在绑定期间修剪可观察的数组

2 个答案: