如何使用 KNOCKOUT JS 使 CSS 类可观察
how to make observable a css class with knockout js
这是我的代码:
.HTML:
<div>
<input type="button" id="btnEnable" value="Enable" />
<input type="button" id="btnDisable" value="Disable" />
</div>
<div id="myDiv">Some Text</div>
<textarea rows="5" id="someText" data-bind="enable: enableText"></textarea>
.css:
.enabled{
background-color: green;
}
.disabled{
background-color: red;
}
JavaScript:
$(document).ready(function () {
$("#myDiv").addClass("enabled").html(" Enabled");
$("#btnEnable").click(function () {
$("#myDiv").removeClass("disabled");
$("#myDiv").addClass("enabled").html(" Enabled");
});
$("#btnDisable").click(function () {
$("#myDiv").addClass("disabled").html(" Disabled");
$("#myDiv").removeClass("enabled");
});
var viewModel = function(){
enableText = ko.observable(true)
}
ko.applyBindings(viewModel);
});
当我单击禁用按钮时,启用的 CSS 类被删除。此时,我需要通过KO可观察视图模型禁用文本区域。
var viewModel = function(){
enableText = ko.observable(here must return false when the enable css class is removed)
}
你需要点击、css 和文本绑定:
$(document).ready(
var viewModel= function () {
var self = this;
self.enableClick = function () {
self.enable(true);
};
self.disableClick = function () {
self.enable(false);
};
// Stores the enable state
self.enable = ko.observable();
// Get a text representation of the state
self.enableText = ko.computed(function(){
return self.enable() ? 'Enabled' : 'Disabled';
});
};
ko.applyBindings(new viewModel());
});
观点 :
<div>
<input type="button" data-bind="click: enableClick" value="Enable" />
<input type="button" data-bind="click: disableClick" value="Disable" />
</div>
<div data-bind="text: enableText, css :{'enabled' : enable,'disabled' : enable() != true }">Some Text</div>
<textarea rows="5" id="someText" data-bind="enable: enable"></textarea>
见小提琴
相关文章:
- CSS-如何定位内容数据标题
- knockoutjs可观察数组
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 在小间隔内通过javascript更新css时,会出现断断续续的动态观察动画
- 如何使用 KNOCKOUT JS 使 CSS 类可观察
- 文件观察器在咕噜咕噜不更新 css 中更少
- 敲除可观察数组中存在键时更改css类
- 更换观察窗.使用CSS媒体查询来调整大小