0

我有一个可观察的，我将绑定到我的 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>
4

2 回答 2

1

您可以制作一个计算出的可观察对象：

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

接着：

data-bind="attr: {'id': trimmedScheduleClause}"
于 2013-10-25T09:40:00.060 回答
0

明白了！.. 我只需要在我的视图模型中创建一个计算的 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>
于 2013-10-25T10:01:57.223 回答