我有一个包含按钮的repeater。按钮的类应该根据它的状态设置。
我如何将State:属性数据绑定到CSS className？
items = new WinJS.Binding.List([
{
JobOperations: [
{ AccountType: "Internal", Index: 1, Requirements: "Do something to something else", Rework: true, State: "onHold", LoadHours: "5.7" },
{ AccountType: "Retail", Index: 2, Requirements: "Watch something for a duration of time", Rework: true, State: "complete", LoadHours: "2.1" }
]
}
]);
<div id="rptOperations" data-win-control="WinJS.UI.Repeater" class="buttonList operationsList" data-win-options="{data: items}">
<button data-win-bind="className: State" class="button">
<span data-win-bind="textContent: Index" class="index">1/span>
<span data-win-bind="textContent: Requirements" class="requirements"></span>
<span data-win-bind="textContent: AccountType" class="accountType"></span>
<span data-win-bind="textContent: LoadHours" class="loadHours"></span>
</button>
</div>
（请注意按钮上的课程onHold和complete）
<div id="rptOperations" class="buttonList operationsList">
<button class="button onHold">
<span class="index">1</span>
<span class="requirements">Do something to something else</span>
<span class="accountType">Internal</span>
<span class="loadHours">5.7</span>
</button>
<button class="button complete">
<span class="index">2</span>
<span class="requirements">Watch something for a duration of time</span>
<span class="accountType">Retail</span>
<span class="loadHours">2.1</span>
</button>
</div>
上面的代码是这个例子的一个愚蠢的版本。一切都在实际应用中完美运行，直到我尝试绑定到导致应用崩溃的className。
如果我不能这样做，最好的方法是什么？我在发布之前已经在google上进行了大量搜索，但在这个主题上找不到太多。
答案 0 :(得分：2)
如果没有更多代码，很难分辨，但我发现人们在WinJS中没有在他们的代码中调用Binding.processAll时遇到问题
app.onactivated = function (args) {
// Other activation code ...
var personDiv = document.querySelector('#nameSpan');
WinJS.Binding.processAll(personDiv, person);
var bindingSource = WinJS.Binding.as(person);
}
通常，您可以解决引用这两个教程的大多数问题，但如果您认为这一切都是正确的，我们需要更多代码来帮助您！参考：http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx，http://msdn.microsoft.com/en-us/library/windows/apps/Hh700356.aspx
在您的情况下，您可以按如下方式定义命名空间和数据：
"use strict";
WinJS.Namespace.define("MyAppData", {
items: new WinJS.Binding.List([
{ AccountType: "Internal", Index: 1, Requirements: "Do something to something else", Rework: true, State: "onHold", LoadHours: "5.7" },
{ AccountType: "Retail", Index: 2, Requirements: "Watch something for a duration of time", Rework: true, State: "complete", LoadHours: "2.1" }
])
});
然后将其连接到您的控件，如下所示：
<div id="rptOperations" data-win-control="WinJS.UI.Repeater" class="buttonList operationsList" data-win-options="{data: MyAppData.items}">
<button data-win-bind="className: State" class="button">
<span data-win-bind="textContent: Index" class="index"></span>
<span data-win-bind="textContent: Requirements" class="requirements"></span>
<span data-win-bind="textContent: AccountType" class="accountType"></span>
<span data-win-bind="textContent: LoadHours" class="loadHours"></span>
</button>
</div>