1

我正在尝试按照 Hottowel SPA 模板中的视图模式创建一个简单的剔除计算 observable。最好的方法是什么？

我最初有这样的事情：

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View',
        testField: ko.observable("This is a test"),
        testComputedField: ko.computed(getComputed, this)
    };

    return vm;

    //#region Internal Methods
    function getComputed() {
        return "Computed: " + this.testField();
    }

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
    //#endregion
});

但这会导致错误，尽管我不是 100% 确定为什么

TypeError: this.testField is not a function

所以经过一些试验和错误，我得到了这个：

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View',
        testField: ko.observable("This is a test")
    };

    vm.testComputedField = ko.computed(getComputed, vm);

    return vm;

    //#region Internal Methods
    function getComputed() {
        return "Computed: " + this.testField();
    }

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
    //#endregion
});

但我不确定这是一种非常漂亮的方法；我显然没有很好地理解 HotTowel 中用于视图模型的模块模式。所以我的问题是：

为什么我原来的方法不起作用？有没有比我的第二种方法更好或替代的方法来定义视图模型？

4

2 回答 2

2

互斥锁，这是我正在使用的一般模式，它对我来说效果很好。

我为 KO 绑定使用函数表达式和局部范围变量，并为 Durandal 特定方法（激活、viewAttached 等）使用函数声明。vm 对象需要在函数表达式之后。无需在任何地方使用“this”。

define(['services/logger'], function (logger) {

    var testField = ko.observable("This is a test");

    var getComputed = ko.computed(function () {
        return "Computed: " + testField();
    });

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }

    var vm = {
        activate: activate,
        title: 'Home View',
        testField: testField,
        testComputedField: getComputed
    };

    return vm;
});

注意：这是 HotTowel SPA 模板

于 2013-03-27T03:19:52.047 回答
0

你原来的方法：

var vm = {
   activate: activate,
   title: 'Home View',
   testField: ko.observable("This is a test"),
   testComputedField: ko.computed(getComputed, this)
};

当您传递this给计算的 ..时this，不指向您的vm. 而是传入vm自身：

var vm = {
   activate: activate,
   title: 'Home View',
   testField: ko.observable("This is a test"),
   testComputedField: ko.computed(getComputed, vm)
};

编辑* * 我不知道为什么上面没有工作。根据淘汰赛文档，第二个参数应将this上下文设置为第一个参数中的方法。试试这个怎么样：

function getComputed() {
   return "Computed: " + vm.testField();
}
于 2013-03-26T23:14:58.580 回答