In this very basic example using Bootstrap Tabs, every time I click on a tab, KnockoutJS redraw the entire tab, is there a way to "save" the state of the tab so next time I click on Messages, KO doesn't have to redraw the entire thing?
It takes ~100ms to draw. (According to Chromium profiler), fps drops to 1fps. It makes the whole thing very unresponsive.
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab_storage" data-bind="with: BuildingsVM">
<h2 data-bind="i18next: 'AllOurStorage'"></h2>
<div class="row" data-bind="foreach: buildingsByType['RawStorage']">
<div data-bind="template: { name: 'tpl_building' }"></div>
</div>
<div class="row" data-bind="foreach: buildingsByType['RefinedStorage']">
<div data-bind="template: { name: 'tpl_building' }"></div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages" data-bind="messages">
<div data-bind="foreach: message">
<span data-bind="text: title"></span>
</div>
</div>
</div>
</div>
Is it possible to keep the state of the DOM so KO doesn't have to redraw the entire tab every time I click on it? (Or an alternative solution)
I'm using the following ko options to avoid unnecessary updates when I array.push(a_lot_of_things):
ko.options.deferUpdates = true;
ko.options.rateLimit = 25;
EDIT:
Tabs are switched using Bootstrap JS library.
$("#MenuTab").on('click','a', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(this).tab("show");
});
Template for a building 'card':
<script type="text/html" id="tpl_building">
<div class="col-xs-10 col-sm-6 col-md-3">
<div class="card card-raised">
<div class="card-header"><h3 data-bind="text: buildingName"></h3> </div>
<div class="card-content">
<div class="row" data-bind="if: (buildingType == 'RawStorage' || buildingType == 'RefinedStorage')">
<div class="col-xs-4">
Usage: <span data-bind="text: getOccupyingSpace"></span> / <span data-bind="text: TotalCapacity"></span>
</div>
<div class="col-xs-8">
<span data-bind="meter: {value: getOccupyingSpace, max: TotalCapacity}"></span>
</div>
</div>
<div class="row">
<!-- ko foreach: Ressources -->
<div class="col-md-6" data-bind="if: $parent.TotalCapacity">
<span data-bind="text: Name"></span> <span data-bind="text: Qte"></span> (<span class="small" data-bind="text: getOccupyingSpace"></span>)
<!-- ko if: ProductionRate() -->
<span data-bind="text: ProductionRate()"></span>/s
<!-- /ko -->
</div>
<div class="col-md-6" data-bind="if: ProductionRate">
<span data-bind="text: Name"></span> <span data-bind="text: getProductionRatePerSecond()"></span>/s (1 every <span data-bind="text: ProductionRate()/1000"></span> sec)
</div>
<!-- /ko -->
</div>
</div>
<div class="card-footer">
<!-- ko if: initialConstructionGoing -->
<i class="fa fa-exclamation-triangle icon-gradient-warning" class="ko-popover"
data-bind="popover: initialConstructionGoing, popoverOptions: { title: i18nextko.t('UnderConstruction_potitle') }" ></i>
<span data-bind="i18next: 'UnderConstruction'"></span> <span data-bind="text: getBuildProgress"></span>
<span data-bind="meter: {p: getBuildProgress, onComplete: 'remove'}"></span>
<span data-bind="WorkersAssigned().length"></span>/<span data-bind="WorkersBuild"></span>
<!-- /ko -->
</div>
</div>
</div>
</script>
Custom binding for 'meter' (A progress bar):
ko.bindingHandlers.meter = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
var progress = ko.unwrap(valueAccessor());
if(progress.value) {
var value = ko.unwrap(progress.value);
var max = ko.unwrap(progress.max);
if(value === 0 && max === 0) {
var percentage = 0;
} else {
var percentage = (value/max)*100;
}
} else {
var percentage = ko.unwrap(progress.p);
}
$progress_tpl = $('<div class="meter"><span style="width: '+percentage+'%"></span></div>');
if(progress.onComplete) {
$progress_tpl.attr('data-oncomplete', progress.onComplete);
}
$(element).append($progress_tpl);
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever any observables/computeds that are accessed change
// Update the DOM element based on the supplied values here.
var progress = ko.unwrap(valueAccessor());
if(progress.value) {
var value = ko.unwrap(progress.value);
var max = ko.unwrap(progress.max);
var percentage = (value/max)*100;
} else {
var percentage = ko.unwrap(progress.p);
}
$(element).find('.meter span').stop().animate({'width': percentage+'%'}, (bindingContext.$root.cf.refreshEvery), 'swing', function() {
if(percentage >= 100) {
if($(element).find(".meter").attr('data-oncomplete') == 'remove') {
$(element).hide(300, function() {
$(element).remove();
ko.cleanNode(element);
});
} else if($(element).find(".meter").attr('data-oncomplete') == 'reset') {
$(element).hide(300, function() {
$(element).remove();
});
} else {
}
}
});
}
};
my KO main VM:
var mainVM = {
Ressources: new RessourcesVM(),
Buildings: new BuildingsVM(),
cf: {
...
}
}
Also modified original tab-content code to reflect the real code (using templates).
I would've made a JSfiddle but for some obscure reasons, it doesn't seem to work properly (new router firmware might be the issue, blocking CDN)à
For a better understanding cotext-wise, you can have a look at my other question: How can I optimize my KnockoutJS pureComputed function?
Looking at the DOM tree in the console, all the elements are still present, even if the tab is not active - maybe something else make the delay.
Related
I'm trying to return a specific data when Enter key is pressed. It's something like a barcodes scanner. After each scann scanner enter key code(keyCode = 13) and then app should go through each json object and return the whole json object depends on the scanned barcode.
At this momment I can get whole json... So as I don't need whole json I would like at first to get blank form and after I put barcode in the input field and press ENTER it sould return the sepcific object...
Yeah kind of a complicated task.
index.vue:
<template>
<div class="row">
<div class="card mx-auto">
<div>
<div class="row">
<div class="card w-auto mx-auto">
<div class="card-header">
<div class="row">
<div class="col">
<h3>{{ id }}</h3>
</div>
</div>
</div>
<div class="card-body">
<form >
<div class="form-row align-items-center">
<div class="col">
<input
type="number"
v-model="barcodeSearch"
name="barcode"
class="form-control"
id="inlineFormInput"
placeholder="Barkodas..."
/>
placeholder="Barkodas...">
</div>
</div>
</form>
<table class="table">
<tbody v-if="items">
<div v-for="item in items" :key="item.PrekesID" class="tItems">
<tr >{{ item.Prekes_Pavad}}</tr>
<hr>
<tr >{{ item.Prekes_Kodas}}</tr>
<hr>
<tr >{{ item.PrekesID}}</tr>
<hr>
<div class="col">
<input type="number" name="ItemsFound" class="form-control" id="inlineFormInput"
placeholder="Faktinis likutis">
</div>
<hr>
<div class="col">
<button type="submit" class="btn btn-primary mb-1">Patvirtinti</button>
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['id'],
data() {
return {
items: []
};
},
mounted() {
fetch("https:**internal address which return json. Example below.**)
.then((res) => res.json())
.then((data) => (this.items = data))
.catch((err) => console.log("err.message"));
},
},
computed: {
searchedBarcode() {
const value = this.barcodeSearch;
let reactiveArray = this.items.filter(function (item) {
if (item && item.Barkodas) {
return item.Barkodas.indexOf(value) > -1;
}
return false;
});
if (reactiveArray.length > 0) {
return reactiveArray;
} else {
return this.items;
}
},
},
</script>
Json exmple:
[
{
"EilesNumeris": 1,
"EilutesNumeris": 1,
"PrekesID": 521328,
"Prekes_Kodas": "5METP000000084",
"Barkodas": "000000220136",
"Prekes_Pavad": "M6-Zn POVERŽLĖ DIN9021",
},
{
"EilesNumeris": 1,
"EilutesNumeris": 2,
"PrekesID": 68316,
"Prekes_Kodas": "5MST000057",
"Barkodas": "0000010008812",
"Prekes_Pavad": "MEDSRAIGČIAI BLT 6,0x40 grūd.D 1/200",
},
{
"EilesNumeris": 1,
"EilutesNumeris": 3,
"PrekesID": 314849,
"Prekes_Kodas": "5MSGR00023",
"Barkodas": "000003962",
"Prekes_Pavad": "%-4,2x19 SAVISRIEGIS Į MET. BE GRĄŽTELIO (AKCIJA)",
},
Use a form submit handler
As we discussed in the comments: Yes, you cannot call barcodeSearch as a method, it is a computed value. But why not create a form handler for the component?
Let's add a form submit handler. You only change this.barcodeSearch in that submit method and don't bind it to the input. This way the only time barcodeSearch is updated is when the form is submitted (pressing enter, clicking search button, clicking "OK" on mobile, etc.).
So remove v-bind="barcodeSearch" from your form first.
Add a submit method for the form:
methods: {
submitForm() {
this.barcodeSearch = this.$refs.searchForm.barcode;
}
}
Then add a submit handler to the form:
...
<form #submit.prevent="submitForm" ref="searchForm">
...
Now the computed value will only change when submitting the form.
I am trying to use kendo dropdown inside a Kendo Menu. The dropdown is rendering fine. I have added noDatatemplate inside kendo dropdown to add new item to my datasource. But when i click on Add button, the newly added item is not showing inside the dropdown. When i try to console the dropdown datasource, i see the newly added item there. So, datasource.sync() is not rendering the newly added value in the dropdown.
If i use it this outside the kendo menu then it is working fine.
Please suggest what i can do to make it work.
Kendo Menu Html
var arr=[{destination:"ABC",destination:"XYZ"}];
$(window).on('load', function () {
$("#mainSapMenu").kendoMenu({
});});
function AddMenuClick() {
BindDestination();
}
function BindDestination(){
$("#drpSapDest").kendoDropDownList({
dataTextField: "destination",
dataValueField: "destination",
optionLabel: "--Select--",
filter: "startswith",
dataSource:arr,
noDataTemplate:$("#nodestinationTemplate").html(),
valuePrimitive: true,
});
}
function addNewItem(id, val) {
var widget = $("#" + id).getKendoDropDownList();
var datasource = widget.dataSource;
if (id == "drpSapDest") {
datasource.add({ "destination": val });
}``
datasource.one("sync", function () {
widget.select(dataSource.view().length - 1);
});
datasource.sync();
}
<script src="http://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="mainSapMenu">
<li id="addNewMenuClick" onclick="AddMenuClick();">
Add
<ul>
<li>
<div id="searchTemplate" style="padding: 10px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<label class="col-md-3 col-lg-3 col-sm-3">Destination</label>:
<div class="col-lg-4 col-md-4 col-sm-4">
<input id="drpSapDest" class="selectpicker" />
<script id="nodestinationTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add , click below - '#: instance.filterInput.val() #' ?
</div>
<br />
<button class="k-button" style="background-color:\\#00547d;color:\\#fff" onclick="addNewItem('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add</button>
</script>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 ">
<label class="col-md-3 col-lg-3 col-sm-3"></label>
<button class="btn blue-btn-small" onclick="CreateNewNode();"><i class="glyphicon glyphicon-plus"> </i> Add</button>
</div>
</div>
</div>
</li>
</ul>
</li>
<li id="searchMenuClick" onclick="RefreshMenuClick();">
Refresh
</li>
</ul>
I have a Bootstrap accordion with the expand collapse panels,which works fine.
But when expanded it should display minus icon which is not working well for me.
When I click to expand all the panel's icons are changed to minus instead of just changing the one which was expanded.
I have my code in the Vue JS template as below
Am calling the toggle function onclick to toggle the icons, but its doing it for all the other panels too.
How can I fix this? Thanks in advance.
Vue.component('accordion', {
data: function () {
return {
alerts: [],
sound: '',
collapsed:true
}
},
template: `
<div>
<div v-for="(alert, index ) in alerts" class="panel panel-default">
<div class="panel-heading" v-bind:style="'background-color:'+alert.color" role="tab" v-bind:id="'heading'+index" >
<a role="button" data-toggle="collapse" data-parent="#accordion"
v-bind:href="'#collapse'+index" aria-expanded="true" v-on:click="toggle">
<i id="collapseExpand" v-show="collapsed" class="more-less fa fa-plus"></i>
<i id="collapseExpand" v-show="!collapsed" class="more-less fa fa-minus"></i>
<h4 class="panel-title">#{{ alert.description }}</h4></a>
</div>
<div v-bind:id="'collapse'+index" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>#{{ alert.comment }}</div>
<div class="row">
<form v-bind:id="'form_'+index" v-bind:name="'form_'+index" v-bind:action="route" method="POST" style="display: inline;">
<input type="hidden" name="_token" :value="csrf">
<input type ="hidden" v-bind:id="'trigger_id_'+alert.triggerid" name = "trigger_id" v-bind:value="alert.triggerid">
<div class="col-lg-12">
<div class="input-group">
<input type="text" v-bind:id="'ack_msg_'+alert.triggerid" name="ack_msg" class="form-control"
placeholder="Acknowledge Message...">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Save</button>
</span>
</div>
</div>
</form>
</div>
</div>
<div class="panel-footer">#{{ alert.timestamp }}</div>
</div>
</div>
<input type="hidden" id="audioFile" name="audioFile" v-bind:value="sound">
</div>`,
mounted: function () {
this.loadData();
setInterval(function () {
this.loadData();
}.bind(this), 1000);
},
methods: {
loadData: function () {
$.get('{{ route('getAlertsPersistent') }}', function (response) {
this.alerts = response;
this.sound = this.alerts[0].sound
}.bind(this));
},
toggle(){
this.collapsed = !this.collapsed ;
}
},
});
new Vue({el: '#accordion'});
You want to separate your accordion item that you want to loop. In that way you can have isolated states in each component.
<div>
<accordion-item
v-for="(alert, index) in alerts"
:alert="alert"
:key="index">
</accordion-item>
</div>
inside your <accordion-item/> you should have collapsed inside your data
The other way around is storing the toggled items in array.
export default {
data: () => ({
toggled: []
}),
methods: {
isActive (item) {
return this.toggled.indexOf(item) >= 0
},
toggleItem (item) {
const index = this.toggled.indexOf(item)
if (index >= 0) {
this.toggled.splice(index, 1)
return
}
this.toggled.push(item)
}
}
}
So you can use it now as follows
<a
role="button"
data-toggle="collapse"
data-parent="#accordion"
v-bind:href="'#collapse'+index"
aria-expanded="true"
v-on:click="toggleItem(index)">
<i
:class="[isActive(index) ? 'fa-minus' : 'fa-plus']"
class="more-less fa"></i>
<h4 class="panel-title">#{{ alert.description }}</h4>
</a>
btw you're looping an id=collapseExpand which will cause you problem. instead try :id="'collapseExpand' + index"
In this plunker sample, data-binding of the detail view works on first show, but does not update when navigating to other items.
What is missing ? Thanks!
Html:
<body>
<div data-role="view" data-model="aViewModel" id="aView">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title">Master</span>
</div>
</div>
<ul data-role="listview" data-style="inset"
data-bind="source: items, events : { click : onClickItem}"
data-template="itemsTemplate">
<script id="itemsTemplate" type="text/html" >
#:name#
</script>
</ul>
</div>
<div data-role="view" id="aDetailView"
data-model="aViewModel.currentItem"
data-show="aViewModel.onDetailViewShow">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title" data-bind="text:name"></span>
<a data-align="left" data-role="backbutton">Back</a>
</div>
</div>
<ul data-role="listview" data-style="inset" >
<li>Name <span data-bind="text: name"></span></li>
<li>Value <span data-bind="text: value"></span></li>
</ul>
</div>
<script src="script.js"></script>
JS:
var app = new kendo.mobile.Application(document.body );
ViewModel = function () {
var self = this;
function Item (name, value)
{
this.name = name;
this.value = value;
}
self.items = new kendo.data.DataSource({
data: [
new Item("AAA",1),
new Item("BBB",2),
new Item("CCC",3)
]
});
self.currentItem = null;
self.onClickItem = function(e) {
e.preventDefault();
self.set("currentItem", e.dataItem);
app.navigate("#aDetailView", "slide");
}
self.onDetailViewShow = function(e) {
}
self = kendo.observable(this);
return self;
};
var aViewModel = new ViewModel();
I'm using MVC3 with Knockout.js and want to attach some data from the api to my button with data-bind=addContribute in a template. This button should open a pop up box and I need the attached button data on that pop up. How can I do this?
My template:
<div>
<ul data-bind="template: {name: 'membersTemplate', foreach: viewModel.membersList}">
</ul>
</div>
<script id="membersTemplate" type="text/html">
<li>
<div class="fl width165">
<img src=" ${ image } " width="33" height="34" />
<span> ${ memberName } </span>
${ memberType }
</div>
<aside class="fr margint10">
<label> ${ contributions } </label>
<a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: viewModel.addContribute" ></a>
</aside>
</li>
</script>
<script id="membersTemplate" type="text/html">
<li>
<div class="fl width165">
<img data-bind="attr : {src : img}" width="33" height="34" />
<span data-bind="text : memberName"></span>
<span data-bind="text : memberType"></span>
</div>
<aside class="fr margint10">
<label data-bind="text : contributions"></label>
<a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: addContribute" ></a>
</aside>
</li>
</script>
membersList varibale in you code should be next
function SingleMember(img, name, type, contr)
{
var self = this
self.img = ko.observable(img)
self.memberName = ko.observable(name)
self.memberType = ko.observable(type)
self.contributions = ko.observable(contr)
self.addContribute = function() {
//
}
}
window.viewModel = new function()
{
var self = this
self.membersList = ko.observableArray()
self.membersList.push(new SingleMember(/*.... params1*/))
self.membersList.push(new SingleMember(/*.... params2*/))
}