Отложить обновление DOM - PullRequest
Новая
       36

Отложить обновление DOM

0 голосов
/ 18 октября 2018

Примечание ОП: Я не спрашиваю о встроенной отложенной настройке выбивки, если только этим нельзя манипулировать, чтобы каким-то образом выполнить это

У меня есть приложение, в котором загружены все возможные экраны и которые изначально привязаны к модели представления.Одно из свойств модели представления управляет тем, какой «экран» виден пользователю.

Для явного болезненного любопытства мне интересно, есть ли встроенный или относительно простой способ сказать нокауту прекратить манипулирование определеннымчасти DOM, «обновлять этот блок, только если свойство X равно этому значению».Или даже лучше - не манипулируйте ЛЮБЫМИ дочерними элементами, если видимость этого элемента отключена в KO.

Конечным результатом будет то, что "невидимые" экраны не будут обновлены, в то время как наблюдаемые в модели представления все равно будут выполнять свою работу в фоновом режиме.Затем, когда экран меняется, DOM для этого вновь видимого экрана будет обновлен.

На многих экранах используются одни и те же наблюдаемые объекты, поэтому я думаю, что может быть выигрыш в производительности, если не постоянно повторно манипулировать DOM - например, обновлять списки HTML, которые в данный момент не видны пользователю, при работе с настройками вдругой экран.

Или, возможно, выигрыш в производительности незначителен, поскольку браузер не перерисовывает скрытые элементы.И вы можете сказать мне так же.

Запуск KnockoutJS 3.4.x, если это имеет значение.

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Если / с привязками - это хорошее место для начала, как сказал Натан.Для более сложных сценариев я обычно выполняю такие вещи с помощью привязки шаблона.Каждый дочерний элемент имеет свою собственную view-модель, а корневая view-модель будет иметь наблюдаемую CurrentPage, которая содержит «видимую» страницу.Это более сложная настройка, но она может сделать код чище, когда у вас много страниц разметки.

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>
0 голосов
/ 18 октября 2018

Посмотрите на привязки потока управления нокаута. if , ifnot и с привязками могут определять, следует ли отображать элементы DOM, которые окружены связанным узлом dom.Думаю, это будет вашим лучшим выбором.

Поскольку вы не хотите отображать ненужные узлы dom, не используйте привязку visibile, поскольку она только скрывает узел dom, но все равно отображается в DOM

...