使用Knockout-es5显示模块模式

Question

我试图整理一个演示,使用knockout-es5插件来简化使用揭示模块模式的模型.ViewModel1是原始的Knockout模型,它工作正常.ViewModel2尝试使用knockout-es5插件.遇到一些事情

• 计算的属性不起作用,因为未跟踪局部变量(例如fullName1).我可以使用ko.defineProperty,但首先它与其他属性分开,第二个必须使用this.propertyName.
• 成员函数所做的更改可能不会因为相同的原因(例如doSomething)而反映出来.再次使用this.propertyName可以工作但RM模式被违反.

JS小提琴

var NS = NS || {};

$(function () {

    NS.ViewModel1 = function (first, last) {
        var
            firstName = ko.observable(first),
            lastName = ko.observable(last),
            fullName = ko.computed(function () {
                return firstName() + " " + lastName();
            }),
            doSomething = function (n) {
                lastName(lastName() + " " + n);
            }
        ;

        return {
            firstName: firstName,
            lastName: lastName,
            fullName: fullName,
            doSomething: doSomething
        };
    };

    NS.ViewModel2 = function (first, last) {
        var
            firstName = first,
            lastName = last,
            fullName1 = ko.computed(function () {
                // Changed values are not reflected
                return firstName + " " + lastName;
            }),
            fullName2 = ko.computed(function () {
                // Should not work
                return this.firstName + " " + this.lastName;
            }),
            doSomething = function (n) {
                // Doesn't work
                lastName += " " + n;
                // Works
                // this.lastName += " " + n;
            }
        ;

        var retObj = {
            firstName: firstName,
            lastName: lastName,
            fullName1: fullName1,
            fullName2: fullName2,
            doSomething: doSomething
        };

        ko.track(retObj);
        ko.defineProperty(retObj, 'fullName3', function () {
            // Changed values are not reflected
            return firstName + " " + lastName;
        });
        ko.defineProperty(retObj, 'fullName4', function () {
            // Works
            return this.firstName + " " + this.lastName;
        });

        return retObj;
    };

    var vm1 = new NS.ViewModel1("John", "Doe");
    ko.applyBindings(vm1, document.getElementById("observableSection"));

    var vm2 = new NS.ViewModel2("Jane", "Doe");
    ko.applyBindings(vm2, document.getElementById("withoutObservableSection"));

    setTimeout(function () {
        vm1.firstName("John 1");
        vm2.firstName = "Jane 1";
    }, 2000);

    setTimeout(function () {
        vm1.doSomething(2);
        vm2.doSomething(2);
    }, 4000);
});

Answer 1

我不确定您的问题是什么，但是它不适用于您尝试使用的模式。

我喜欢 knockout-es5 的想法，但它公开的当前 API 存在一些问题，如果您偏离了它们的模式，这些问题确实会给您带来麻烦。

另一个问题是，如果您传递this.property给其他视图模型，目的是让其他视图模型能够订阅可观察对象或更新可观察对象，那么它显然不起作用。您只需传递当前值。在这种情况下，您必须记住获取您的财产的实际可观察​​值。使用好的旧淘汰法，您知道当您访问该属性时您正在传递可观察对象本身。

该项目还很年轻，因此希望这些 API 问题能够得到解决。但现在，它需要开发人员记住太多的事情才能做到正确。