在父视图中使用视图作为用户控件的单页应用

single page apps using a view as user control in parent views

本文关键字:视图 控件 用户 单页 应用      更新时间:2023-09-26

请帮我解决这个问题。我正在使用durandal 2.0,requirejs,敲除和微风来开发我的水疗应用程序。我有一个视图(选项.html),我想将其用作其他 3 个视图(视图 1.html、视图 2.html 和 视图 3.html)的用户控件。下面是选项视图的内容。

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

我现在的问题是当我尝试在 3 个父视图之间导航时。似乎我从第一个父视图中的日期选择器中选择的值在其他两个视图中被识别。我如何实现在选项视图中从 3 个不同的父视图导航时具有不同 id 的逻辑。提前谢谢。

您需要的是视图模型之间的通信(父 vm 到选项 vm,反之亦然) 有几种方法

    VM
  1. 之间的消息传递 - 您可以使用挖空通知或 durandal 消息传递框架在 VM 之间发送消息,因此选项 vm 会刷新其值,但是记住每个 VM 的值会有点复杂,因此父 VM 本身应保存这些值。这使得倾向于我的第二种选择。
  2. 与其将选项 vm 作为 vm,不如将其用作所有父 vm 中的类。在父视图中,将选项视图添加为模板并将选项对象绑定到其中,这样,每个视图都有一个选项对象,它们是独立的,并且将自己维护其值。