Durandal：将相同的视图模型（控件）定义为两个不同的变量

Question

所以我创建了一个滚动条控件，我想在同一视图模型中的两个不同位置使用它，例如：-

define(['common/viewmodels/controls/scroller-nav', 'common/viewmodels/controls/scroller-nav'],
     function(mainScrollNav, modalScrollNav))

        vm = {
            activate: activate,
            mainScrollControl: ko.observable(null),
            modalScrollControl : ko.observable(null)
        }

        return vm;

        function activate() {
            vm.mainScrollControl({ model: mainScrollNav, view: 'common/views/controls/mainScroll' });
            vm.modalScrollControl({ model: modalScrollNav, view: 'common/views/controls/modalScroll' });

            // load up the data that is to be used for each (should be independent)
            mainScrollNav.init();   
            modalScrollNav.init();
        }
    }
}

控件在填充 mainScrollControl 和 modalScrollControl 的两个实例上加载正常，但是，数据正在共享（修改模态中的滚动条位置，并在主页上修改它），即使控件是单独定义的。似乎 mainScrollNav 和 modalScrollNav link 是单个服务视图模型，而不是独立的视图模型。我是采用这种正确的方法还是应该使用其他方法？

Answer 1

解决方案不是创建视图模型，而是视图模型的函数，所以...

var control = function(){
     vm = {
         // Vars and functions
     }
     return vm;
}

return control;

然后只需调用定义参数中传递的引用，即可根据需要多次重新使用视图模型。他们也都独立工作。

 define(['common/viewmodels/controls/scroller-nav'],function(scrollNav)){

 vm = {
     mainScroller: new scrollNav(),
     subPageScroller: new scrollNav()
 }

return vm;

Durandal：将相同的视图模型（控件）定义为两个不同的变量

Durandal: Defining the same viewmodel (control) as two different variables

javascript

durandal

durandal-navigation