WinJS 绑定到 C# Windows 运行时组件类

Question

我似乎无法在我的 WinJS 视图代码和我的 Windows 运行时组件视图模型代码之间进行数据绑定。有什么建议或指向讨论这个问题的网站吗？

我来自 Xaml/C# 背景，但需要制作我的 UI（也称为视图）HTML/WinJS。因此，我将 HTML/WinJS 视为类似于 Xaml + C#-Codebehind 的视图。但我希望其他所有内容都使用 C# 代码编写。因此，我从一个 Windows 运行时组件项目中创建我的 ViewModel，并在 WinJS 中设置一个局部变量来表示 ViewModel 的一个实例。但是，当我尝试绑定到 ViewModel 上的简单字符串属性时，我得到以下 javascript 异常：

JavaScript 库代码将在 ms-appx://microsoft.winjs.1.0/js/base.js 中的第 8652 行第 17 列捕获异常 0x800a13d5 - JavaScript 运行时错误：无法定义属性“_getObservable”：对象不可扩展 文件：base.js，行：8652，列：17

这是我的 home.js 文件中获取 ViewModel 实例并处理绑定的代码：

(function () {
    "use strict";

    var _viewModel;

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            _viewModel = ViewModels.ViewModelLocator.viewModelTest;

            WinJS.Namespace.define("Application.Pages.Home", { "ViewModel": _viewModel });
            WinJS.Binding.processAll(null, Application.Pages.Home.ViewModel);
        }
    });
})();

下面是带有 data-win-bind 属性的简单 home.html 代码：

<section aria-label="Main content" role="main" data-win-bindsource="Application.Pages.Home">
        <h2 data-win-bind="innerText: ViewModel.testString"></h2>
        <h3>Test String Property: <span data-win-bind="innerText: testString"></span></h3>
        <button id="changeTestStringButton">Change testString value</button>
</section>

Answer 1

在 WinJS 中，唯一可绑定的对象/属性是那些使用 WinJS API 标记为 Observable 的对象/属性。这类似于数据绑定在 XAML/C# 中的工作方式，因为您需要实现 INotifyPropertyChanged。

由于您创建的 WinRT 对象是密封的，就我的理解而言，您无法扩展它以使其在您希望的上下文中可观察。

我过去实现这一点的方法是创建 JavaScript 包装类，以根据需要处理与 WinRT 类型之间的转换（对我们来说，从托管代码进行数据服务调用）。