Question

OP的注意事项： 我不是在问内置的淘汰赛延迟设置，除非可以通过某种方式操纵该设置

我有一个应用程序，该应用程序已加载所有可能的屏幕并最初绑定到视图模型。视图模型上的属性之一控制用户可以看到哪些“屏幕”。

出于纯粹的病态好奇心，我想知道是否存在一种内置的或相对简单的方法来告诉敲除程序停止操纵DOM的某些部分，“仅当X属性等于此值时才更新此块”。甚至更好-如果在KO中关闭了该元素的可见性，则不要操作任何子元素。

最终结果将是不可见的“屏幕”将不会更新，而视图模型上的可观察对象仍将在后台执行操作。然后，当屏幕更改时，该新可见屏幕的DOM将被更新。

许多屏幕使用相同的可观察对象，因此我认为不经常重新操作DOM可能会提高性能-例如更新用户当前不可见的HTML列表，同时弄乱另一个屏幕上的设置。

或者性能优势可以忽略不计，因为浏览器没有重绘隐藏的元素。而且你可以告诉我很多。

如果重要的话，运行KnockoutJS 3.4.x。

Answer 1

查看敲除的“控制流”绑定。 Python libraries，if和ifnot绑定可以确定是否渲染被绑定dom节点包围的DOM元素。我认为这将是您最好的选择。

由于您不想渲染不必要的dom节点，因此不要使用可见绑定，因为它仅隐藏dom节点，但仍在DOM中渲染

Answer 2

if / with绑定是一个很好的起点，就像Nathan所说的那样。对于更复杂的场景，我通常会通过模板绑定来完成这种事情。每个子元素都有其自己的视图模型，并且根视图模型将具有可保存“可见”页面的CurrentPage Observable。这是一个更复杂的设置，但是当您有很多值得标记的页面时，它可以使代码更简洁。

function viewModel(){
	var self = this;

	this.PageOne = new pageOneVM();
	this.PageTwo = new pageTwoVM();
	
	this.CurrentPage = ko.observable(this.PageOne);
	this.CurrentTemplate = ko.pureComputed(function(){
		return self.CurrentPage().TemplateName;
	});
}

function pageOneVM(){
	var self = this;
	
	this.TemplateName = 'viewOne';
}

function pageTwoVM(){
	var self = this;
	
	this.TemplateName = 'viewTwo';
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<label>Select a page:</label><input type="button" data-bind="click: function(){CurrentPage(PageOne)}" value='1'/><input type="button" data-bind="click: function(){CurrentPage(PageTwo)}" value='2'/>
<br/><br/>


<div style="border: 1px solid blue;" data-bind="template: { data: CurrentPage, name: CurrentTemplate }"></div>


<script type="text/html" id="viewOne">
	<h4>Page One</h4>
</script>

<script type="text/html" id="viewTwo">
	<h4>Page Two</h4>
</script>

推迟更新DOM

2 个答案: