NativeScript viewModel 可以具有“计算”属性吗？

Posted 2023-03-27

【中文标题】NativeScript viewModel 可以具有“计算”属性吗？

【英文标题】：Can a NativeScript viewModel have "computed" properties?

【发布时间】：2019-04-27 07:28:01

【问题描述】：

假设我有一个简单的 viewModel，其中属性 foo 应该和其他属性一样，只是它是使用另一个属性的值生成/计算的，并在另一个属性更新时更新：

const observableModule = require("tns-core-modules/data/observable");

function HomeViewModel() 
    const viewModel = observableModule.fromObject(
        name: 'John',
        foo() 
            return 'Hello ' + viewModel.name; //not really what I'm looking for
        
    );

    return viewModel;

Knockout.js 有这些“计算”的 observables，我发现它们在很多地方都非常方便。这就是使用 Knockout.js 的样子：

function HomeViewModel() 
    const viewModel = 
        name: ko.observable('John'),
        foo: ko.pureComputed(() => 'Hello ' + viewModel.name())
    ;

    return viewModel;

NativeScript 中有类似的东西吗？

【参考方案1】：

NativeScript Core 的重量非常轻，没有像开箱即用计算这样的花哨功能。但是有propertyChangeEvent，您可以在name 更改时使用它来更新foo。

var observableModule = require("tns-core-modules/data/observable");

function HomeViewModel() 
 var viewModel = observableModule.fromObject(
  name: "John",
  foo: ""
 );
 viewModel.on("propertyChange", function (event) 
  const propertyName = event.propertyName;
  if (propertyName === "name") 
    viewModel.set("foo", "Hello " + event.value);
  
 );
 // To compute initial value for `foo` 
 viewModel.notifyPropertyChange("name", viewModel.get("name"), viewModel.get("name"));
 return viewModel;


module.exports = HomeViewModel;

Here is a playground sample.

如果您正在寻找语法方便的计算、动态模板等花哨的功能，我建议您迁移到 Angular / Vue。我没有使用过 Knockout，但我想它可以与 NativeScript 集成，就像今天的 Angular / Vue 一样，需要付出一些体面的努力 - 一天结束时一切都只是 javascript ;)

【讨论】：

谢谢。虽然我已经知道propertyChange 处理程序，但我并不喜欢它，因为它会在任何属性更改时触发，即使我只想听一个。这就是为什么我/希望会有另一种方式。另外，这只适用于 viewModel。如果在我的示例中我想使用另一个模型而不是 name 的属性，我不能这样做。 -- 不知道 Knockout 是否可以移植。但我想既然已经移植了 Angular 和 Vue，那应该是可能的。 （虽然我只是框架的“消费者”，所以我做不到^_^）