Question

如何创建一个将div添加到div

的绑定处理程序

<div class="control-group" id ="nameControlGroup">
    <label>Name</label>
    <div class="controls">
        <input type="text" data-bind="value:scheduleClause">
    </div>
</div> 
<div class="control-group">                 
    <div class="controls">
        <button class="btn btn-primary" data-bind = "click:addScheduleClause">Save</button>
    </div>
</div>

我需要一个绑定处理程序，以便每次单击按钮时它都会向nameControlGroup div添加一个类

Answer 1

您应该在ViewModel中创建一个CssClass observable属性，并在addScheduleClause方法中更新它：

function ViewModel() {
    var self = this;
    self.CssClass = ko.observable();

    self.addScheduleClause = function() {
       self.CssClass("CSS CLASS");
    }
}

在html部分中，您应该为div nameControlGroup添加绑定：

<div class="control-group" id ="nameControlGroup" data-bind="css: CssClass">
    <label>Name</label>
    <div class="controls">
        <input type="text" data-bind="value: Name">
    </div>
</div>

Answer 2

像这样使用：

document.getElementsByClassName('btn').addEventListener("click",function(){

    document.getElementById('nameControlGroup').setAttribute("class", "your_class_to_add");

});

Answer 3

假设您使用此按钮：

<button class="btn btn-primary" data-bind = "click:addScheduleClause">Save</button>

然后在你的“addScheduleClause”函数中添加一行代码

$('#nameControlGroup').addClass('newClassName');

我不认为为此制作绑定处理程序是个好主意。但如果你坚持（这样的事情应该有用）：

ko.bindingHandlers.myspecialbutton = {
  init: function (element, valueAccessor){
    $(element).on('change', function(event){
      $('#nameControlGroup').addClass('newClassName');
    });
  }
};

甚至更好，亚历山大写的。

Answer 4

这应该作为jQuery解决方案：

jQuery(document).ready(function(){
     jQuery('button').click(function(){
        jQuery('#nameControlGroup').addClass('YOUR CLASS NAME');
     });
});

为addclass创建绑定处理程序

4 个答案: