javascript - 数据绑定(bind)到 className winjs

Question

我有一个包含按钮的中继器。按钮的类应根据其状态进行设置。

如何将 State: 属性数据绑定(bind)到 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 和绑定(bind)

<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>

上面的代码是本示例的简化版本。一切都在实际应用程序中完美运行，直到我尝试绑定(bind)到 className 这导致应用程序崩溃。

如果我不能这样做，最好的方法是什么？在发布此内容之前，我在谷歌上进行了广泛的搜索，但找不到太多关于该主题的信息。

Answer 1

如果没有更多代码，很难说清楚，但我看到人们在 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>