数据绑定到类名 winjs

Question

我有一个包含按钮的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" }
        ]
    }
]);

HTML 和绑定

<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 上进行了广泛搜索，但找不到太多关于该主题的内容。

Answer 1

没有更多代码很难说，但我看到人们在他们的代码中不调用 Binding.processAll 时会遇到 WinJS 问题

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>