We Keep Coding

Refresh UI when object key value change - Knockout

sorry for a noob question, just started with Knockout.js. I have an array of objects and I want to update the view when object property favorite: changes but every time I click on an icon that triggers the change nothing happens. When I add a new object to an array UI gets rerendered. I would really appreciate some help with this. Thanks
<div id="container" data-bind="foreach:savedSearches">
<div class="save-search-item" data-bind="attr:{'data-name': $data.name, 'data-id':$data.id, 'favourite':$data.favorite() === 1}">
<div data-bind="text: $data.name"></div>
<div class="icons">
<a href="#" class="favourite-search">
<i class="fas fa-star" data-bind="css: {favourite: $data.favorite() === 1}"></i>
</a>
<a href="#" class="edit-search">
<i class="fas fa-edit"></i>
</a>
<a href="#" class="delete-search">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
var searches = [
{
activation_time: null,
activation_time_ms: null,
favourite: 1,
enabled: 1,
id: 66,
name: "adfdfafs"
},
{
activation_time: null,
activation_time_ms: null,
favourite: 0,
enabled: 1,
id: 66,
name: "adfdfafs"
}
];
ko.applyBindings(AppViewModel, $('#container'));
function AppViewModel(data) {
self.savedSearches = ko.observableArray([]);
self.favourite = ko.observable();
self.populateSavedSearches = function(data) {
data.forEach(function(search) {
search.favorite = ko.observable();
});
self.savedSearches(data);
}
}
$('.favourite-search').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
// get parent element with id
var parent = e.currentTarget.closest('.save-search-item');
var searchId;
var isFavourite = false;
if (parent) {
searchId = parseInt(parent.getAttribute('data-id'));
isFavourite = parent.getAttribute('favourite');
searches.map(function(search) {
if (search.id === searchId) {
search.favorite = 0;
ko.populateSavedSearches(search);
}
});
}
});

When using knockout, you should not add your own event listeners via jQuery.
In this case, use the click binding to react to user behavior.
I did the bare minimum to make your snippet work, but I think it gets the point across:
You already found out you have to make the favorite property observable! Great start
I added a toggle function to each of the searches that swaps the favorite observable between 1 and 0
In the view, I added a click binding that calls toggle
In the view, I moved your favourite attribute binding to be a css binding. This makes sure favorited searches get the favourite class
In CSS, I styled .favourite elements to have a yellow background.
In applyBindings, I use new to create a new viewmodel and pass the app container using [0]
You can see these changes in action in the snippet below.
var searches = [
{
activation_time: null,
activation_time_ms: null,
favourite: 1,
enabled: 1,
id: 66,
name: "adfdfafs"
},
{
activation_time: null,
activation_time_ms: null,
favourite: 0,
enabled: 1,
id: 66,
name: "adfdfafs"
}
];
ko.applyBindings(new AppViewModel(searches), $('#container')[0]);
function AppViewModel(data) {
const self = this;
self.savedSearches = ko.observableArray([]);
self.favourite = ko.observable();
self.populateSavedSearches = function() {
data.forEach(function(search) {
search.favorite = ko.observable(search.favorite);
search.toggle = function() {
search.favorite(search.favorite() ? 0 : 1);
}
});
self.savedSearches(data);
}
self.populateSavedSearches();
}
.favourite { background: yellow }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="container" data-bind="foreach: savedSearches">
<div class="save-search-item" data-bind="
click: toggle,
attr: {
'data-name': $data.name,
'data-id':$data.id
},
css: { 'favourite': $data.favorite() === 1 }
">
<div data-bind="text: $data.name"></div>
<div class="icons">
<a href="#" class="favourite-search">
<i class="fas fa-star" data-bind="css: {favourite: $data.favorite() === 1}"></i>
</a>
<a href="#" class="edit-search">
<i class="fas fa-edit"></i>
</a>
<a href="#" class="delete-search">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>

I want to show only one input clicked (on vue.js)

I would like to show an input on the click, but being in a for loop I would like to show only the clicked one
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo }}
</li>
<li class="button-container">
<button class="ml-1 btn btn-primary rounded-circle btn-sm" v-if="isHidden" v-on:click="isHidden = false"><i
class="THIS-CLICK"></i></button>
<input class="ml-5 border border-primary rounded" v-if="!isHidden" v-model="todo">
<button class="ml-1 btn btn-success rounded-circle btn-sm" v-if="!isHidden" v-on:click="isHidden = true"
#click="modifyTodo(n, todo)"><i class="far fa-save"></i></button>
</li>
</div>
I would like that on clicking on THIS-CLICK, only one input (that of the button clicked) is visible, but being in a for loop I don't know if it can be done

I would suggest to change the structure a bit in your app. You can clean up your code a lot by using v-if inside the button instead of two different buttons.
Also, moving as much javascript out from the markup as possible is a good practice.
I have an example below where this is done.
Regarding your question, you would have to add the key to each todo item.
new Vue({
el: "#app",
data() {
return {
todos: [{
name: 'wash hands',
isHidden: true
},
{
name: 'Stay home',
isHidden: true
}
],
};
},
methods: {
toggleTodo(n, todo) {
const hidden = todo.isHidden;
if (hidden) {
this.modifyTodo(n, todo);
todo.isHidden = false;
} else {
todo.isHidden = true;
}
},
modifyTodo(n, todo) {
//Some logic...
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo.name }}
</li>
<li class="button-container">
<input class="ml-5 border border-primary rounded" v-if="!todo.isHidden" v-model="todo.name">
<button #click="toggleTodo(n, todo)">
<i v-if="todo.isHidden" class="THIS-CLICK">click-this</i>
<i v-else class="far fa-save">save</i>
</button>
</li>
</div>
</div>
If you cannot do this, you could go with adding a new key to data like: hiddenTodos that would be an array of ids/a unique identifier to the todo you selected to hide.
in the template, it would be something like this:
<button #click="hiddenTodos.push(todo)">
...
<div v-if="hiddenTodos.includes(todo)"

Refresh Boostrap-Vue table after deleting a row

I'm using Bootstrap-Vue for my datatables and got the following table within my dashboard:
I can succesfully delete items by clicking on the trash icon. It sends an AJAX request using Axios. However, after deletion it still displays the item until I manually refresh the web page. How do I solve this? I don't want to make another AJAX request to load in the updated version, I think the best way to solve it is just remove the deleted item row from the datatable.
I tried giving my table a ref tag and call a refresh function using this.$refs.table.refresh(); but with no success.
My code:
<template>
<div>
<b-modal ref="myModalRef" hide-footer title="Delete product">
<div class="container">
<div class="row">
<p>Are you sure you want to delete this item?</p>
<div class="col-md-6 pl-0">
Confirm
</div>
<div class="col-md-6 pr-0">
Cancel
</div>
</div>
</div>
</b-modal>
<div id="main-wrapper" class="container">
<div class="row">
<div class="col-md-12">
<h4>Mijn producten</h4>
<p>Hier vind zich een overzicht van uw producten plaats.</p>
</div>
<div class="col-md-6 col-sm-6 col-12 mt-3 text-left">
<router-link class="btn btn-primary btn-sm" :to="{ name: 'create-product'}">Create new product</router-link>
</div>
<div class="col-md-6 col-sm-6 col-12 mt-3 text-right">
<b-form-input v-model="filter" class="table-search" placeholder="Type to Search" />
</div>
<div class="col-md-12">
<hr>
<b-table ref="table" show-empty striped hover responsive :items="posts" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage">
<template slot="title" slot-scope="data">
{{ data.item.title|truncate(30) }}
</template>
<template slot="description" slot-scope="data">
{{ data.item.description|truncate(50) }}
</template>
<template slot="public" slot-scope="data">
<i v-if="data.item.public === 0" title="Unpublished" class="fa fa-circle false" aria-hidden="true"></i>
<i v-else title="Published" class="fa fa-circle true" aria-hidden="true"></i>
</template>
<template slot="date" slot-scope="data">
{{ data.item.updated_at }}
</template>
<template slot="actions" slot-scope="data">
<a class="icon" href="#"><i class="fas fa-eye"></i></a>
<a v-on:click="editItem(data.item.id)" class="icon" href="#"><i class="fas fa-pencil-alt"></i></a>
<i class="fas fa-trash"></i>
</template>
</b-table>
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0 pagination-sm" />
</div>
</div><!-- Row -->
</div><!-- Main Wrapper -->
</div>
<script>
export default {
data() {
return {
posts: [],
filter: null,
currentPage: 1,
perPage: 10,
totalRows: null,
selectedID: null,
fields: [
{
key: 'title',
sortable: true
},
{
key: 'description',
},
{
key: 'public',
sortable: true,
},
{
key: 'date',
label: 'Last updated',
sortable: true,
},
{
key: 'actions',
}
],
}
},
mounted() {
this.getResults();
},
methods: {
// Our method to GET results from a Laravel endpoint
getResults() {
axios.get('/api/products')
.then(response => {
this.posts = response.data;
this.totalRows = response.data.length;
});
},
getID: function(id){
this.selectedID = id;
this.$refs.myModalRef.show();
},
deleteItem: function (id) {
axios.delete('/api/products/' + id)
.then(response => {
this.$refs.myModalRef.hide();
this.$refs.table.refresh();
});
},
editItem: function (id){
this.$router.push({ path: 'products/' + id });
}
},
}
</script>

The deleteItem method should be like this:
deleteItem(id) {
axios.delete('/api/products/' + id)
.then(response => {
const index = this.posts.findIndex(post => post.id === id) // find the post index
if (~index) // if the post exists in array
this.posts.splice(index, 1) //delete the post
});
},
So basically you don't need any refresh. If you remove the item for posts array Vue will automatically handle this for you and your table will be "refreshed"

try to remove that post with the given id after the successful delete :
axios.delete('/api/products/' + id)
.then(response => {
this.posts= this.posts.filter(post=>post.id!=id)
});

axios.delete('/api/products/' + id)
.then(response => {
this.getResults();
});

Angular ng-show if in array

I have a ng-repeat for article comments, that looks like this:
<div ng-repeat="comment in comments">
<li class="item" ng-class-even="'even'">
<div class="row">
<div class="col">
<i class="icon ion-person"></i> {{ comment.user.first_name }} {{ comment.user.last_name }}
<i class="icon ion-record"></i> {{ comment.created_at }}
</div>
<!-- TODO: this needs to be an ng-if admin -->
<div ng-show="hasRole(comment.user)" class="col right">
<i class="icon ion-record admin"></i> Admin
</div>
</div>
<div class="row">
<div class="col">
<p>{{ comment.text }}</p>
</div>
</div>
</li>
</div>
I am trying to show this part only if the user is an admin:
<div ng-show="hasRole(comment.user)" class="col right">
<i class="icon ion-record admin"></i> Admin
</div>
I have tried to set that up following the answers here.
So I made a function in my controller:
$scope.hasRole = function(roleName) {
return $scope.comments.user.roles.indexOf(roleName) >= 0;
}
But it returns -1 every time, even when the user is an admin. My data looks like this:
1:Object
$$hashKey: "object:28"
article_id:"2"
created_at:"2016-05-12 12:19:05"
id:6
text:"someCommentText"
updated_at:null
user:Object
active:"1"
created_at:null
first_name:"admin"
id:1
last_name:"admin"
roles:Array[1]
0:Object
created_at:null
id:1
name:"Admin"
parent_id:null
pivot:Object
slug:"admin"

Use this in your HTML
<div ng-show="hasAdminRole(comment.user.roles)" class="col right">
<i class="icon ion-record admin"></i> Admin
</div>
this is the method to determine that the user belongs to the admin role or not.
$scope.hasAdminRole = function(roles) {
var isAdmin = false;
for(var i = 0; i < roles.length; i++) {
if (roles[i].name == 'Admin') {
isAdmin = true;
break;
}
}
return isAdmin;
}

Perhaps you have an error on this line?
var indexOfRole = $scope.comments.indexOf(user.roles);
You are looking here to see if the list of roles for this users exists within the array of comments.
Maybe you need to just check in the actual user.roles array and see if there is an Admin role there? Something like:
$scope.hasRole = function(user) {
for (var i = 0; i < user.roles.length; i++) {
if (user.roles[i].slug === 'admin') { return true; }
}
return false
}

That's because it's an object, you can fetch the index of only array. In the link that you provided is an array.

Update parent scope through child scopes in Angular

<div class="full-row" ng-repeat="row in pendingRequests | orderBy: '-modificationDate' | partition:3">
<div class="one-third" ng-repeat="request in row track by request.id">
<div class="incoming_request" ng-class="actionClass(request)">
<div class="request_comments">
<hr>
<p><span>Recipients:</span></p>
<div class="comments">
<p ng-repeat="comment in request.comments track by comment.id" class="dont-break-out">
<span class="author" ng-bind="comment.userName | employeeName">:</span>
{{comment.text}}
<span ng-if="comment.status == State.APPROVED" class="approval success" ng-click="changestatus(comment, request)"><i class="fa fa-check"></i></span>
<span ng-if="comment.status == State.REJECTED" class="approval error" ng-click="changestatus(comment, request)"><i class="fa fa-times"></i></span>
<span ng-if="comment.status == State.PENDING" class="approval" ng-click="changestatus(comment, request)" title="{{showApproveTooltip(comment)?'Click to approve the request on behalf of this user':''}}"><i class="fa fa-clock-o"></i></span>
</p>
</div>
</div>
<div class="request_resolve">
<hr>
<div class="textarea-holder">
<textarea placeholder="Your comment..." ng-model="request.newComment" ng-model-options="{ updateOn: 'default blur'}"></textarea>
</div>
<div class="button-container">
<button ng-click="approve(request);" ng-disabled="request.isProcessing" class="btn btn-primary" am-hide-request-resolve-div>Confirm<i ng-hide="request.isProcessing" class="fa fa-check"></i><span ng-show="request.isProcessing" class="spinner no-hover"><a><i class="fa-li fa fa-spinner fa-spin"></i></a></span></button>
<button ng-click="reject(request);" ng-disabled="request.isProcessing" class="btn btn-default pull-right" am-hide-request-resolve-div>Reject <i class="fa fa-times"></i></button>
</div>
</div>
Here is peace of code. As You may see there are many ng-repeats. My pendingRequests collection very often is updated from server. After 3 or more updates when I click on some button nothing is happend on UI.
Details :
On approve click I change status of one comment.
$scope.approve = function (request) {
var currentUserComment = request.comments.filter(function(comm) {
return comm.userId == user.id && comm.status == "Pending";
})[0];
currentUserComment.status = State.APPROVED; // change comments Status
currentUserComment.text = request.newComment;
delete request.newComment;
if (!currentUserComment) {
request.isProcessing = false;
return;
}
Comments.update(currentUserComment, function() {
// $rootScope.$broadcast('daysUpdated');
});
request.isProcessing = false;
};
This must show this span <span ng-if="comment.status == State.APPROVED" class="approval success" ng-click="changestatus(comment, request)"><i class="fa fa-check"></i></span> , cause now status is equal to State.APPROVED. But nothing happens.
After some research I think it all because ng-repeat and collection updates.
ng-repeat creates a child scope for each item, and so the scopes in play might look like this:
bookCtrl scope = { tags: [ 'foo', 'bar', 'baz' ] }
ng-repeat child scopes: { tag: 'foo' }, { tag: 'bar' }, { tag: 'baz' }
So when I update comment.status for some request Angular don't know in what scope it exists.
Am I right? And how can I solve my problem (after changing comment status show correct span)?
More Simple code :
<div ng-repeat="request in requests">
<div ng-repeat="comment in request.comments">
<span ng-if="comment.status == State.APPROVED" class="approval success"><i class="fa fa-check"></i></span>
<span ng-if="comment.status == State.REJECTED" class="approval error"><i class="fa fa-times"></i></span>
<span ng-if="comment.status == State.PENDING" class="approval"><i class="fa fa-clock-o"></i></span>
</div>
<div>
<button ng-click="approve(request)">
Approve
</button>
</div>
</div>
And approve function :
var user = LoggeInUser(); // some user who is loggedIn now
$scope.approve = function(request){
var currentUserComment = request.comments.filter(function(comm) {
return comm.userId == user.id && comm.status == "Pending";
})[0];
currentUserComment.status = State.APPROVED; // change comments Status
Comments.update(currentUserComment, function() { // send PUT request to API
// $rootScope.$broadcast('daysUpdated');
});
}

You may find your solution in moving the functions to $scope.functions.functionName. I believe from reviewing this that you are running into scoping issues, as you alluded to in your statement.
JS
$scope.functions.approve = function () { ... }
HTML
functions.approve(request)
You also might have a look at using controller as, sometimes that can help:
https://docs.angularjs.org/api/ng/directive/ngController