windows-runtime - WinJS 绑定(bind)到 C# Windows 运行时组件类

Question

我似乎无法让数据绑定(bind)在我的 WinJS View 代码和我的 Windows 运行时组件 ViewModel 代码之间工作。有什么建议或指向讨论这个问题的网站吗？

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

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

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

(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 中，唯一可绑定(bind)的对象/属性是那些使用 WinJS API 标记为可观察的对象/属性。这类似于数据绑定(bind)在 XAML/C# 中的工作方式，因为您需要实现 INotifyPropertyChanged。

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

我过去完成此任务的方法是创建 JavaScript 包装类，以根据需要处理与 WinRT 类型之间的转换(对我们而言，从托管代码进行数据服务调用)。