我正在尝试在 knockout.js 单击事件上操作 css 类,但它不起作用。目前,我正在根据 $data.IsSelected 元素的值 (true | false) 绑定(bind) css 类。我无法得到做我想做的事的正确方法——我应该使用 DOM 进行操作(就像我现在尝试做的那样),还是应该将 observableArray 元素的值更改为 true 而不是 false,例如,然后更新ViewModel,所以理论上这必须更改 css 类。 这是 JS。
<script>
function StyleViewModel() {
var self = this;
self.pref = ko.observableArray();
self.img = ko.observableArray(["img/style1.png", "img/style2.png", "img/style3.png", "img/style4.png", "img/style5.png", "img/style6.png"]);
self.toggle = function (data, event) {
if (data.IsSelected == true) {
//Here i'm trying to manipulate with DOM directly
$(event.target).closest("div").removeClass("txt-active").addClass("txt");
$(event.target).find("a.button").text("Добавить");
}
else {
$(event.target).removeClass("txt").addClass("txt-active");
$(event.target).find("div.txt-active > a.button").text("Добавлено");
}
}
$.getJSON('/api/usersprofiles?userguid=' + $("#MainContent_guid").val(), self.pref);
}
$(document).ready(function () {
ko.applyBindings(new StyleViewModel());
$("#go").click(function () {
$("div.test-block").each(function () {
var style = $(this).find("h3").text();
var option = $(this).find("a").text();
var selected;
if (option == "Добавить") {
selected = false;
}
else if (option == "Добавлено") {
selected = true;
}
var json = "{'UserGUID':'" + $("#MainContent_guid").val() + "', 'Style':'" + style + "', 'Selected':'" + selected + "'}"
$.ajax({
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
url: "/api/usersprofiles",
data: json,
success: function () { },
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
});
setTimeout(function () {
window.location.replace("default.aspx");
}, 3000);
});
});
</script>
这是显示绑定(bind)的 HTML:
<input type="hidden" runat="server" id="guid" />
<div class="container">
<div class="title">
<h2>Вкусы</h2>
<p>Что вам по душе?</p>
</div>
<div class="styles" data-bind="foreach: pref">
<div class="test-block" data-bind="click: $root.toggle">
<input type="hidden" data-bind="value: $data.Id" />
<div class="bigshadowtest">
<img alt="" src="img/bigshadow.png">
</div>
<div data-bind="css: $data.IsSelected == true ? 'txt-active' : 'txt'">
<h3 data-bind="text: $data.name"></h3>
<a href="#" class="button" data-bind="text: $data.IsSelected == true ? 'Добавлено' : 'Добавить'"></a>
</div>
<img alt="" data-bind="attr: { src: $root.img }">
</div>
</div>
<table class="info" style="width: 100%; height: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
<a href="#" id="go" class="gobtn">Поехали!</a>
</td>
</tr>
</table>
</div>
附言这是另一个问题 - 我无法将 observableArray self.img 绑定(bind)到相应的 img 元素。
最佳答案
使可观察数组的元素可观察。用mapping plugin ,这样您的 isSelected 将成为一个可观察对象,并反射(reflect)它对 ui 的值(value)变化。
更改您的 getJson 方法(未经测试的代码)
$.getJSON('/api/usersprofiles?userguid=' + $("#MainContent_guid").val(), function(data) {
ko.mapping.fromJS(data, self.pref);
});
或者不使用映射插件,您可以创建一个新的 pref 对象,并将来自服务器的数据绑定(bind)到循环中的数据,并将它们推送到 observableArray 中。这种方式比使用映射插件更可控。
var oPref = function (data) {
var self = this;
self.Id = ko.observable(data.Id);
self.IsSelected = ko.observable(data.IsSelected);
self.name = ko.observable(data.name);
self.imgLink = ko.observable(data.imgLink);
self.toggle = function () {
if (self.IsSelected()) self.IsSelected(false);
else self.IsSelected(true);
}
}
function StyleViewModel() {
var dataFromServer = [
{ Id: 1, IsSelected: false, name: "name1", imgLink: "img/style1.png" },
{ Id: 2, IsSelected: false, name: "name2", imgLink: "img/style2.png" },
{ Id: 3, IsSelected: false, name: "name3", imgLink: "img/style3.png" }]
var self = this;
self.pref = ko.observableArray();
ko.utils.arrayForEach(dataFromServer, function(item) { self.pref.push(new oPref(item)); });
}
$(document).ready(function () {
ko.applyBindings(new StyleViewModel());
});
你的 html 应该如下所示
<input type="hidden" runat="server" id="guid" />
<div class="container">
<div class="title">
<h2>Вкусы</h2>
<p>Что вам по душе?</p>
</div>
<div class="styles" data-bind="foreach: pref">
<div class="test-block" data-bind="click: toggle">
<input type="hidden" data-bind="value: Id" />
<div class="bigshadowtest">
<img alt="" src="img/bigshadow.png">
</div>
<div data-bind="css: { 'txt-active': IsSelected(), 'txt': IsSelected() == false }">
<h3 data-bind="text: name"></h3>
<a href="#" class="button" data-bind="text: (IsSelected() == true ? 'Добавлено' : 'Добавить')"></a>
</div>
<img alt="" data-bind="attr: { src: imgLink }">
</div>
</div>
<table class="info" style="width: 100%; height: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;"> <a href="#" id="go" class="gobtn">Поехали!</a>
</td>
</tr>
</table>
</div>
关于javascript - Knockout.js 单击更改(不切换)css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25822560/