Javascript 如何将动画添加到Knockout.js'；如果绑定？

我想使用Knockout.js

If

绑定，但要包含动画。我使用单个视图模型容器来允许将大量单独的视图加载到同一容器中。如果我在“模板”上使用

可见性

绑定，则绑定将隐藏，并且所有绑定都会抛出错误，因为它们的视图模型当前未加载。我担心，如果所有内容都已加载，这些视图模型将开始降低页面速度

从淘汰

If

文档中：

但是，if绑定在物理上添加或删除所包含的 标记，并且仅在 表达是真实的

knockout动画转换文档使用jQuery的Show/Hide函数创建自定义绑定。但是，它们也隐藏/显示DOM元素

简言之，我正在努力学习两件事中的一件

在jQuery中删除/添加DOM元素以便在自定义绑定中使用的适当方法是什么？

或

如何将

if

绑定到敲除中，以便我可以对其进行反向工程？

澄清编辑： 以进一步说明代码是如何设置的。提出此问题的站点的管理部分将包含一个编辑所有标准内容页和访问业务报告的位置

Html“模板”是这样存储的（很明显，它们不是敲除模板，而是包含数据绑定的Html文件。这可能会有令人信服的原因进行更改。）

我们的javascript与此类似

BaseViewModel.js: 
  Content view model 

AdminEditViewModels.js: 
  UserEditViewModel
  ContentEditViewModel
  [1 view model per item]

AdminReportsViewModels.js
  [similar to above]

单击链接时，主页内容视图模型将加载到基本视图模型中，并通过激发此问题的绑定使其可见。然后，每个视图模型都有自己的负载来触发ajax调用

self.ViewOrders = function () {
  self.Content("Orders");
  self.ContentVM(new AdminOrdersViewModel());
  self.ContentVM().Load();
}

---

目前只有大约9个不同的“模板”，我们已经尽可能地规范化了它们，但它们很可能会增长。绑定只会防止每个“模板”向控制台抛出错误。

如果您对单独的视图使用模板，则可以通过使用工厂函数初始化模板来获得

afterRender

回调

以下是一个简单的存根：

ko.components.register("ItemTemplate", {
    viewModel:  function(params) {
        function Item(params) {
            var self = this;
            // observables
            self.enhance = function(elements) {
                // enhance/animate here the DOM elements
            };
        }
        Item.prototype.dispose = function() {
            // dispose what has been created inside here
        };
        var item = new Item(params);
        return item;
    },
    template: '<div data-bind="template: {afterRender: enhance}">'+
            // component markup
            '</div>',
    synchronous: true
});

ko.components.register（“ItemTemplate”{
viewModel:函数（参数）{
功能项（参数）{
var self=这个；
//可观测
self.enhance=功能（元素）{
//在此处增强/动画DOM元素
};
}
Item.prototype.dispose=函数（）{
//在此处处置已创建的内容
};
var项目=新项目（参数）；
退货项目；
},
模板：“”+
//组件标记
'',
同步：对
});

如果要为单独的视图使用模板，则可以通过使用工厂函数初始化模板来获得

afterRender

回调

以下是一个简单的存根：

ko.components.register("ItemTemplate", {
    viewModel:  function(params) {
        function Item(params) {
            var self = this;
            // observables
            self.enhance = function(elements) {
                // enhance/animate here the DOM elements
            };
        }
        Item.prototype.dispose = function() {
            // dispose what has been created inside here
        };
        var item = new Item(params);
        return item;
    },
    template: '<div data-bind="template: {afterRender: enhance}">'+
            // component markup
            '</div>',
    synchronous: true
});

ko.components.register（“ItemTemplate”{
viewModel:函数（参数）{
功能项（参数）{
var self=这个；
//可观测
self.enhance=功能（元素）{
//在此处增强/动画DOM元素
};
}
Item.prototype.dispose=函数（）{
//在此处处置已创建的内容
};
var项目=新项目（参数）；
退货项目；
},
模板：“”+
//组件标记
'',
同步：对
});

使用您提到的fadeIn/fadeOut示例，我尝试创建一个对元素执行淡入淡出的绑定，然后通过将元素的内部内容包装到一个新的div中来初始化该内容的“if”绑定。然后，if绑定被传递一个新的可观察属性，该属性使用jQuery的淡入淡出函数的回调设置。它让人感觉有点粗糙，在过于复杂的场景中可能不起作用，但也许您或SO社区可以改进它

var viewModel=function（）{
var self=这个；
self.showContent=ko.可观察（假）；
self.content=ko.observable（“这里有内容”）；
}
//使用IF绑定从DOM中删除元素的内容，但也会在之前/之后淡出。
ko.bindingHandlers.fadedIf={
init:function（元素、valueAccessor、allBindingsAccessor、数据、bindingContext）{
//最初根据值将元素设置为立即可见/隐藏
var value=valueAccessor（）；
//如果该值是正常函数，则将其作为计算值，以便正确更新
如果（！ko.isObservable（值））{
value=ko.computed（{read:valueAccessor}）；
}
//将我们的observable属性附加到访问器，以便可以在更新函数中使用它
valueAccessor.domShowed=ko.可观察（ko.展开（值））；
//将元素的任何内容包装到新的div中，然后使用“if”绑定绑定该div。
//这样，用于淡入/淡出的元素及其事件挂钩永远不会离开dom，但所有内容都会离开。
//它还防止对同一元素应用多个绑定。
var contentWrapper=$（element.children（）.wrapAll（document.createElement（“div”））.parent（）[0]；
applyBindingAccessorNode（contentWrapper，{'if'：函数（）{return valueAccessor.domshighed}，bindingContext）；
},
更新：函数（元素、值访问器）{
//当值随后更改时，缓慢地淡入或淡出元素
var value=valueAccessor（）；
if（ko.展开（值））{
valueAccessor.domshighed（true）；//将元素还原到DOM
$（element.fadeIn（）；
}否则{
$（元素）。淡出({
完成：f