1

HottowelSPAテンプレートのviewmodalパターンに従って計算された単純なノックアウトを作成しようとしています。これを行うための最良の方法は何ですか？

私はもともとこのようなものを持っていました：

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のビューモデルに使用されるモジュールパターンをうまく理解していません。だから私の質問は：

元の方法が機能しないのはなぜですか？2番目の方法よりもビューモデルを定義/構造化するためのより良いまたは代替の方法はありますか？

4

2 に答える 2

2

Mutex、これは私が使用している一般的なパターンであり、私にとってはうまく機能しています。

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;
});

注：これはHotTowelSPAテンプレート用です

于 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)
};

編集**上記が機能しなかった理由がわかりません。ノックアウトのドキュメントによると、2番目の引数はthis最初の引数のメソッドにコンテキストを設定する必要があります。これを試してみませんか：

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