Knockout.js：结合“可见”和多视图模型答案

【问题标题】：Knockout.js: combining "visible" and multiple view modelsKnockout.js：结合“可见”和多视图模型
【发布时间】：2023-03-10 16:46:01
【问题描述】：

我花了一些时间试图解开这个问题。我有一个页面，希望美容院老板使用它来管理两件事：

约会
有特殊安排的日子

要选择“视图”，我使用的是基于 Knockout 可见绑定的切换：

因此，当单击单选按钮时，会呈现一个 div 并隐藏另一个：

<div id="selectingScopes" class="col-xs-6 col-md-4">
            <fieldset>
                <legend>View:</legend>
                <div id="radioControls" class="switch-toggle well">
                    <input jsf:id="appointmentsRadio" name="appointmentsRadio" type="radio"
                           data-bind="checked: selectedScope" value="#{bigcopy.appointmentsLabel}"/>
                    <label for="appointmentsRadio" onclick="">#{bigcopy.appointmentsLabel}</label>

                    <input jsf:id="specialdaysRadio" name="specialdaysRadio" type="radio"
                           data-bind="checked: selectedScope" value="#{bigcopy.specialDaysLabel}"/>
                    <label for="specialdaysRadio" onclick="">#{bigcopy.specialDaysLabel}</label>

                    <a class="btn btn-primary"></a>
                </div>
            </fieldset>
       </div>
<div id="appointmentsModel" class="row" data-bind="fadeVisible: selectedScope()==='#{bigcopy.appointmentsLabel}'">
        <ui:include src="includes/appointmentsManagement.xhtml"/>
    </div>
    <div class="row" data-bind="fadeVisible: selectedScope()==='#{bigcopy.specialDaysLabel}'">
        <ui:include src="includes/specdaysManagement.html"/>
    </div>

同时，我想将上面的“appointmentsModel”div 绑定到一个不同的视图模型，该模型只负责管理必须从服务器上传的约会表。这是筛选出无关杂乱的js文件：

var restServiceRoot = "localhost:8080/RimmaNew/rest";

var scopeSelector = {
selectedScope: ko.observable()
};

ko.applyBindings(scopeSelector);
//appointments part
//Initial load
function appointmentsModel() {
var self = this;
self.serviceURL = restServiceRoot + "/appointments";
self.Appointments = ko.observableArray([]);
$.ajax({
    url: self.serviceURL,
    type: 'get',
    data: null,
    dataType: 'json',        
    success: function (appointments) {
        var parsed = JSON.parse(appointments);
        var appointmentsArray = parsed.current;
        var mappedAppointments = $.map(appointmentsArray, function(item){
            return new Appointment(item);
        });
        self.Appointments(mappedAppointments);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        var err = xhr.responseText;
        alert(err);
    }
});
}

var appointmentsModelImpl = new appointmentsModel();
ko.applyBindings(appointmentsModelImpl, document.getElementById('appointmentsModel'));

我的代码灵感来自两本书：Knockout.js (O'Reilly - Jamie Munro) 和 Java EE and HTML 5 Enterprise Application Development (Oracle Press)，它们几乎没有涉及在 KO 中具有交叉绑定的主题。我同样没有发现 official KO documentation 对这项工作有帮助。

有一个处理类似问题的 stackoverflow 票，但 in one 是作者自己回答的 - 他的解释对他自己来说非常有意义，但“stopBinding”和“controlsDescendantBindings”的提及似乎被删除了他在下面使用的两个绑定的上下文...我看不到如何将其应用于我的问题...

如果可以的话，你会帮我一个大忙

将我引导到一个资源，我可以在其中自学如何在 KO 中使用交叉绑定
或者指导我如何修改我的代码，以便能够控制这两个 div 的可见性并为每个 div 应用视图模型

两者都做会很棒。

1 The full code for the original page (xhtml) is here

2The js file

3The js 'classes' file

4The enclosed page with the 'appointments' table

【问题讨论】：

链接问题中的答案几乎完全是从knockmeout.net/2012/05/quick-tip-skip-binding.html 复制而来。该链接提供了有关原因和方式的更多详细信息。
抱歉，回复晚了，我在提供的链接中选择了第一个选项，它有效:-) 非常感谢！

标签： javascript jsf knockout.js

【解决方案1】：

您最好的选择可能是对您的模型有一点不同的看法。与其做一个单独的模型绑定，不如做一个默认的约会模型，然后更新其中的可观察对象。

我会做的是有一个单一的父绑定到正文，或在正文中包含一个 div，然后为各种子模型创建子模型。

示例 JS：

var MyParentModel = function(){
    var self = this;

    self.selectingScopes = {
        scope: ko.observable("");
    };

    self.appointmentModel = {
        param1: ko.observable(),
        param2: ko.observable()
    }
};
ko.applyBindings(new MyParentModel());

示例 HTML：

<div id="appointmentsModel" data-bind="with: appointmentModel"></div>

【讨论】：