0

Please help me with this issue. I'm using durandal 2.0, requirejs, knockout and breeze for my spa application. I have a view(options.html) that i want to use as a user control for 3 other views(view1.html,view2.html, and view3.html). Below is the content of the options view.

define(['durandal/app', 'services/logger', 'knockout', 'jquery', 'services/unitofwork'], function (app, logger, ko, $, unitofwork) {

    var uow = unitofwork.create();
    var substatus = ko.observableArray();
    var vm = {
        status: substatus,
        activate: activate,
        startDate: ko.observable(),
        endDate: ko.observable(),
        attached: function (view, parent) {

            var startdatepicker = $(view).find('#startdatediv').datepicker();
            var enddatepicker = $(view).find('#enddatediv').datepicker();
            var starttxt = $(view).find('#txtstartDate');
            var endtxt = $(view).find('#txtendDate');

            startdatepicker.on('changeDate', function (ev) {

                starttxt.text(startdatepicker.datepicker('getAsText'));
                if ((date && date.valueOf()) > (endDate && endDate.valueOf())) {
                    $('#alert').show().find('strong').text('The start date cannot be after the end date');
                } else {
                    $('#alert').hide();
                    startDate = date;
                }

                startdatepicker.datepicker('hide');
            });
            enddatepicker.on('changeDate', function (ev) {

                starttxt.text(startdatepicker.datepicker('getAsText'));
                if ((date && date.valueOf()) > (endDate && endDate.valueOf())) {
                    $('#alert').show().find('strong').text('The start date cannot be after the end date');
                } else {
                    $('#alert').hide();
                    startDate = date;
                }

                enddatepicker.datepicker('hide');
            });
            console.log(startdatepicker.html());
            console.log(enddatepicker.html());
        }
    };

    return vm;

    function activate() {
        return true;
    }


    function fail(error) {

        logger.logError(msg, error, "", true);
    }
    function getPredicate() {
        var predicate = new breeze.Predicate.create("LookupId", "==", 1);
        console.log(predicate);


        return predicate;
    }
});

My problem now is when i try to navigate between the 3 parent views. It seems that the value i selected from the datepicker in the first parent view is recognized in the two other views. How do i achieve the logic where in the options view acts like it has a different id when navigated from the 3 different parent views. Thanks in advance.

4

1 回答 1

0

您需要的是在视图模型之间进行通信（父虚拟机到选项虚拟机，反之亦然）有几种方法

  1. 虚拟机之间的消息传递-您可以使用淘汰通知或 durandal 消息传递框架在虚拟机之间发送消息，因此选项 vm 会刷新其值，但是记住每个 vm 的值会有点复杂，因此父 vm 本身应该保存这些值. 这使我倾向于我的第二个选择。
  2. 不要将选项 vm 作为 vm ，只需将其用作所有父 vm 中的类。在父视图中，将选项视图添加为模板并将选项对象绑定到它，这样每个视图都会有一个选项对象，它们是独立的，并且会自己维护它们的值。
于 2013-10-04T09:51:54.487 回答