The goal
Remove items from external observableArray using KnockoutJS.
The problem
There is two observableArray in my application. One for available products to buy and other to products that I have added in the Summary by clicking in add button.
Until here, all works fine. But now I need to remove items from Summary and change the button state/style — and I do not know how to access an external observableArray to do this.
To understand my problem, check out this jsFiddle or see the markup in the next topic.
As you could see, when I click on add button, the product goes to Summary. When I click on remove — regardless if the button is from the summary or the product — I want to change the button state and remove the item from summary. Technically speaking, I want to remove the item from items' observableArray utilizing the products' observableArray.
My code
HTML:
<ul class="summary">
<!-- ko foreach: Summary.items -->
<p data-bind="text: name"></p>
<button class="btn btn-danger btn-mini remove-item">
<i class="icon-remove">×</i>
</button>
<!-- /ko -->
</ul>
<h1>What would you to buy?</h1>
<ul class="products">
<!-- ko foreach: Product.products -->
<li>
<h3 data-bind="text: name"></h3>
<p data-bind="text: desc"></p>
<!-- ko if:isAdded -->
<button data-bind="if: isAdded" class="btn btn-small btn-success action remove">
<i data-bind="click: $root.Summary.remove" class="icon-ok">Remove</i>
</button>
<!-- /ko -->
<!-- ko ifnot:isAdded -->
<form data-bind="submit: function() { $root.Summary.add($data); }">
<button data-bind="ifnot: isAdded" class="btn btn-small action add">
<i class="icon-plus">Add</i>
</button>
</form>
<!-- /ko -->
</li>
<!-- /ko -->
</ul>
JavaScript:
function Product(id, name, desc) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
self.desc = ko.observable(desc);
self.isAdded = ko.observable(false);
}
function Item(id, name) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
}
function SummaryViewModel() {
var self = this;
self.items = ko.observableArray([]);
self.add = function (item) {
self.items.push(new Item(item.id(), item.name()));
console.log(item);
item.isAdded(true);
};
self.remove = function (item) {
item.isAdded(false);
};
};
function ProductViewModel(products) {
var self = this;
self.products = ko.observableArray(products);
};
var products = [
new Product(1, "GTA V", "by Rockstar"),
new Product(2, "Watch_Dogs", "by Ubisoft")
];
ViewModel = {
Summary: new SummaryViewModel(),
Product: new ProductViewModel(products)
}
ko.applyBindings(ViewModel);
You can search for it.
You can query the cart for an item with the same id, and remove it
self.remove = function (item) {
var inItems = self.items().filter(function(elem){
return elem.id() === item.id(); // find the item with the same id
})[0];
self.items.remove(inItems);
item.isAdded(false);
};
Unless you have hundreds of thousands of items, that should be perfectly fast enough. Just remember to use items.remove() so it'll know to update the observableArray :)
Once you've declared products as an observableArray, you should just be able to call remove on it (according to this). Given you have a reference to the object being deleted to pass in.
Related
I am using Typescript to define my Knockout ViewModel.
I have a JSON file, the structure of which can be seen here (Github gist as It's a bit large to paste here).
The structure is basically:
OrderLine (the root) -> milestones -> factory_date
Or orally: (many) order lines have (many) milestones, which each have (one) factory date.
I am trying to build a ViewMOdel with the following:
var FactoryAppViewModel = (function () {
function FactoryAppViewModel(seasonID) {
var self = this;
self.seasonID = seasonID;
self.orderlines = ko.observableArray([]);
this.buildViewModel();
}
FactoryAppViewModel.prototype.buildViewModel = function () {
var self = this;
var getOrderLines = HTTP.get("/season/" + self.seasonID + "/orderlines").done(function (data) {
self.orderlines(JSON.parse(data));
}).fail(function () {
error("Could not get orderlines");
});
};
As far as I know, the JSON.parse on the data here will apply the values to the orderlines ko.observableArray([]), However I need to apply a ko.observable to the order lines children (milestones), and to a milestones child (factory_date) as well. And I don't know how to do this. Least of all from JSON.
I have read this but it didn't seem to help me.
I know that the observable isn't applied, because when i change a factory_date in the view, it doesn't update the viewmodel.
Any help would be appreciated. The javascript above is the compiled TypeScript.
EDIT:
Here is an example of the way I'm accessing the code in the view:
<tbody data-bind="foreach: orderlines">
<tr>
<td data-bind="text: factory.name"></td>
<!-- ko foreach: milestones -->
<!-- ko if: factory_date == null -->
<td>
<span>TBA</span>
</td>
<!-- /ko -->
<!-- ko if: factory_date !== null -->
<td>
<div class="wrapper-wrapper">
<div class="btn btn-primary dateChanger">
<span data-bind="text: moment(factory_date.milestone_date).format('DD-MM-YYYY')"></span>
</div>
<div class="date-update-wrapper text-center">
<input type="text" data-bind="attr: {value: moment(factory_date.milestone_date).format('DD-MM-YYYY')}" class="form-control datetimepicker">
<a class="save-date btn btn-success" data-bind="click: function(){$root.saveDate(factory_date, $parent)}"><i class="fa fa-check"></i></a>
<a class="cancel-date btn btn-danger"><i class="fa fa-times"></i></a>
</div>
</div>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
</tbody>
The part that made me aware I had an issue was this part:
data-bind="click: function(){$root.saveDate(factory_date, $parent)}"
I made a simple saveDate method, which was console.log(factory_date.milestone_date), and it returned the default JSON data, despite me editing it in the view (using the datepicker).
Knockout does not map children in lists to observables by default. There is a plugin called ko.mapping that can help you achieve what you are looking for.
You can set up a "children" mapping, or loop through your children, manually making them observable (In this case from JavaScript):
var mappedChildren = [];
var children = someObj.children();
for (var i = 0; i < children.length; i++) {
var mappedChild = ko.mapping.fromJS(children[i], mappingFunction);
mappedChildren.push(mappedChild);
}
someObj.children(mappedChildren);
I have this code that successfully deletes an exam from a list of exams displayed on a page, but the page still shows the deleted exam. You have to manually refresh the page for the view to update. We are using a simlar pattern on other pages and it's working correctly. I don't understand why it doesn't work on this page.
// Used to handle the click event for Delete
remove = (exam: Models.Exam) => {
$("#loadingScreen").css("display", "block");
var examService = new Services.ExamService();
examService.remove(exam.examId()).then(() => {
examService.getByFid().then((examinations: Array<Models.Exam>) => {
this.exams(examinations);
this.template("mainTemplate");
});
}).fail((error: any) => {
// Add this error to errors
this.errors([error]);
window.scrollTo(0, 0);
}).fin(() => {
$("#loadingScreen").css("display", "none");
});
}
Here's the UI code that displays the list of exams
<div class="section module">
<!-- ko if: exams().length > 0 -->
<!-- ko foreach: exams.sort(function(a,b){return a.mostRecentDateTaken() > b.mostRecentDateTaken() ? 1:-1}) -->
<div class="addremove_section bubbled">
<a class="button open_review" data-bind="click: $root.edit">Edit</a>
<a class="button open_review" data-bind="click: $root.remove">Delete</a>
<div class="titleblock">
<h4 data-bind="text: 'Exam Name: ' + examTypeLookup().examTypeName()"></h4>
<div data-bind="if:examEntityLookup()!=null">
<div data-bind=" text: 'Reporting Entity: ' + examEntityLookup().description()"></div>
</div>
<div data-bind="text: 'Most recent date taken: ' + $root.formatDate(mostRecentDateTaken())"></div>
<div data-bind="text: 'Number of attempts: ' + numberOfAttempts()"></div>
<div data-bind="text: 'Pass/Fail Status: ' + $root.PassFailEnum(passFailId())"></div>
</div>
<div class="clearfix"></div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: exams().length == 0 -->
<div class="addremove_section bubbled">
<div class="titleblock">
<div>No Exams Have Been Entered.</div>
</div>
</div>
<!-- /ko -->
</div>
EDIT: I discovered that if I remove the sort from this line in the view
<!-- ko foreach: exams.sort(function(a,b){return a.mostRecentDateTaken() > b.mostRecentDateTaken() ? 1:-1}) -->
to
<!-- ko foreach: exams -->
it works! The only problem is that I need the data sorted.
I removed the sorting from the view and did the sorting in the service. Not really sure why I can't sort in the view. I assume it's a knockout.js bug.
<!-- ko foreach: exams -->
[HttpGet]
[Route("api/exam")]
public IEnumerable<TDto> GetApplicantExams()
{
var dtos = GetCollection(() => _examService.GetApplicantExams(UserContext.Fid).OrderBy(e => e.DateTaken));
return dtos.ForEach(t => AddItems(t));
}
It's not a bug in Knockout. Since the sort invocation (as you're doing it) is not under the control of a computed/dependent observable, there's nothing to trigger it to resort. You've basically broken the connection between the UI (or more technically, the bindingHandler) and the ko.observable which KO uses for tracking changes.
I've run into this many times where I work, and the general pattern I use is something like this:
var viewmodel = {
listOfObjects:ko.observableArray(),
deleteFromList:deleteFromList,
addToList:addToList,
}
//in your HTML, you'll do a foreach: listOfSortedObjects (instead of listOfObjects)
viewmodel.listOfSortedObjects = ko.computed(function(){
//Since this is *inside* the change tracking ecosystem, this sort will be called as you would expect
return viewmodel.listOfObjects().sort(yourSortingFunction);
});
//Since you cannot edit a (normal) computed, you need to do your work on the original array as below.
function deleteFromList(item){
viewmodel.listOfObjects.remove(item);//Changing this array will trigger the sorted computed to update, which will update your UI
}
function addToList(item){
viewmodel.listOfObjects.push(item);
}
I'm new with knockout.js and trying to fix data binding on a site that is build on Laravel and is using knockout.js.
Observable array works well and items can be pushed and popped without issues. The problem is with the binding to GUI. When items are pushed to array those are added to GUI, but nothing else works, like removing items, and also when adding more items later on those are added on the top of the GUI element list, not added after existing items on the GUI. The observable array is having correct items after push/pop/removeall, its just not reflecting to GUI.
I guess that the problem is that observable array is not binded to GUI, but I cannot figure out what could be wrong.
Stripped code:
Chat.init = function(){
Chat.viewModel = new Chat.ViewModel;
ko.applyBindings(Chat.viewModel, $('#msg_canvas').get(0));
};
Chat.ViewModel = function(){
self.messages = ko.observableArray();
self.setMessages = function(msgs){
_.each(msgs, function(msg){
self.messages.push(msg);
});
};
self.clearMessages = function(data, e){
self.messages.removeAll();
}
}
clearMessages is called via onclick: data-bind="click: $parent.clearMessages
The HTML is this:
<div id="msg_canvas" class="msg-wrap col-md-12"
style="height:274px;overflow-y:scroll;" data-bind="foreach: messages">
<div class="media msg">
<div class="media-body">
<span data-bind="text: sent_at"></span>
<small class="col-lg-10" data-bind="text: message"></small>
</div>
</div>
Any help or pointer to what could be causing the problem would be highly appreciated.
UPDATE: added inner HTML which was not included to post before
You need to have a control inside the div to hold your messages, like a <span> or <p>. Otherwise, you're simply doing the foreach without outputting the values. So your div should look something like this, using $data to access the value:
<div id="msg_canvas" data-bind="foreach: messages">
<p data-bind="text: $data"></p>
</div>
Here's a working snippet based on your code (setMessages slightly modified / hard coded with values):
ViewModel = function(){
self.messages = ko.observableArray([]);
self.setMessages = function(){
var msgs = ['message','message','message'];
_.each(msgs, function(msg){
self.messages.push(msg + ' ' + self.messages().length);
});
};
self.clearMessages = function(data, e){
self.messages.removeAll();
}
self.removeMessage = function(item){
self.messages.remove(item);
}
};
ko.applyBindings(new ViewModel());
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="msg_canvas" class="msg-wrap col-md-12"
style="height:274px;overflow-y:scroll;border: black solid 1px" data-bind="foreach: messages">
<p data-bind="text: $data"></p>
<input type="button" data-bind="click: removeMessage" value="Remove Item" />
</div>
<input type="button" data-bind="click: setMessages" value="Add Message" />
<input type="button" data-bind="click: clearMessages" value="Remove All" />
I have static array that have 2 set of data.
I have make 2 part of the one div and on right side show all list from array and on left side nothing.
On right side have put + sign on button, on it's click that record came on left side div and working fine and at that time the plus sign become minus when that record came on left side, when click on minus sign again that record removed from left side. Just like toggle.
Now I want to filter the right side of list using textbox.
It will search on 2 columns i.e. code and title.
but how to make filter I don't know.
HTML Code :
<div class="col-md-6">
<div class="col-md-4">
<input type="text" required id="filterD" class="form-control" data-bind=""/>
</div>
<!-- ko foreach: controlFields -->
<div class="row">
<div class="col-md-11 table-bordered">
<div class="form-group" style="padding-top: 3px;">
<div class="col-md-2" data-bind="text:code">
</div>
<div class="col-md-7" data-bind="text:title">
</div>
<div class="col-md-1" data-bind="text:i1">
</div>
<div class="col-md-1" data-bind="text:i2">
</div>
<div>
<!-- ko ifnot : viewFlag -->
<button class="btn-primary btn-xs" data-bind="click: $root.addField">
<i class="glyphicon glyphicon-plus-sign"></i>
</button>
<!-- /ko -->
<!-- ko if : viewFlag -->
<button class="btn-primary btn-xs" data-bind="click: $root.removeField">
<i class="glyphicon glyphicon-minus-sign"></i>
</button>
<!-- /ko -->
</div>
</div>
<!-- ko foreach: subFields -->
<div style="padding-top: 3px" class="form-group" data-bind="attr:{'title':description()}">
<div class="col-md-2">
</div>
<div style="border-top: 1px solid #ddd; " class="col-md-2" data-bind="text:code">
</div>
<div style="border-top: 1px solid #ddd; " class="col-md-7" data-bind="text:title">
</div>
<div>
<button class="btn-primary btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></button>
</div>
</div>
<!-- /ko -->
</div>
</div>
<br />
<!-- /ko -->
</div>
JavaScript :
var exports = {},
ViewModel, ControlField , SubField;
SubField = function(code, title,data,description){
var self = this;
self.code = ko.observable(code);
self.title = ko.observable(title);
self.data = ko.observable(data);
self.description = ko.observable(description);
};
ControlField = function(code, title, i1, i2){
var self = this;
self.code = ko.observable(code);
self.title = ko.observable(title);
self.i1 = ko.observable(i1);
self.i2 = ko.observable(i2);
self.subFields = ko.observableArray([]);
self.viewFlag = ko.observable(false);
};
ViewModel = function(data) {
var self = this;
self.controlFields = ko.observableArray([]);
var controlField = new ControlField("100","BookTitle","0","1");
self.controlFields.push(controlField);
controlField.subFields().push(new SubField("a","Title","JAVA","For Entering Item Title Data"));
controlField.subFields().push(new SubField("p","Section","2","For Section"));
var controlField1 = new ControlField("245","Author","1","0");
self.controlFields.push(controlField1);
controlField1.subFields().push(new SubField("a","Name","Herbert","Name of The Author"));
controlField1.subFields().push(new SubField("d","Place","Ontario","Place of Author"));
self.addField = function(field){
field.viewFlag(true);
};
self.removeField = function(field){
field.viewFlag(false);
};
};
I want that when I type any character in input=text it will filter data and then show.
Any suggestion on this.
Here's Screen of this code :
You can use ko.computed for filtering the data.
//filter html binding
<input type="text" required id="filterD" class="form-control" data-bind="value:filter,valueUpdate: 'keyup'" />// use valueUpdate binding
//bind filter to filter text
self.filter = ko.observable();
//Use filteredList in html binding instead of controlFields
self.filteredList = ko.computed(function () {
var filter = self.filter(),
arr = [];
if (filter) {
ko.utils.arrayForEach(self.controlFields(), function (item) {
if (item.code() == filter || item.title() == filter) {
arr.push(item);
}
});
} else {
arr = self.controlFields();
}
return arr;
});
Fiddle Demo
//sorry for ui part(Html alignment) in demo.
I've searched and searched for an answer, so hope I haven't duplicated this anywhere.
I am using ASP .NET MVC5, with KnockoutJS as my ORM.
For some reason, data isn't being populated in the DOM when I try to reference back to the ViewModel using the $root binding context (Once inside the "with" binding context)
The with binding context is declared in a normal mvc view razor page, however I am using the $root binding context inside a partial view which is loaded into the main view.
Has anyone had any problems like this or can spot my error? I will paste my viewmodel and html code below.
ViewModel
var ProfileViewModel = function () {
var self = this;
this.Member = ko.observable(); - With Binding to this
this.SocialNetworks = ko.observableArray();
this.Skills = ko.observableArray();
this.SkillsFilter = ko.observable(""); - Trying to access these from root
this.FilteredSkills = ko.observableArray();
this.References = ko.observableArray();
this.Has = function (has_what) {
if (has_what) {
if (has_what.length > 0) {
return true;
} else {
return false;
}
}
return false;
};
$.getJSON("/doitgrad/api/member/CameronPearce91", function (allData) {
self.Member(new DoItGrad.Objects.Member(allData, true));
self.FilteredSkills = ko.computed(function () {
return ko.utils.arrayFilter(self.Skills(), function (item) {
var filter = self.SkillsFilter(),
doesnthaveskill = (jQuery.inArray(item, self.Member().details.skills()) == -1),
containsfiltertext = (item.title().indexOf(filter) > -1);
if (filter != "") {
return (doesnthaveskill && containsfiltertext);
} else {
return doesnthaveskill;
}
});
});
})
$.getJSON("/doitgrad/api/skill/", function (allData) {
var mappedSkills = $.map(allData, function (item) { return new DoItGrad.Objects.Skill(item); });
self.Skills(mappedSkills);
});
}
var model = new ProfileViewModel();
ko.applyBindings(model);
MVC View
<section id="profile-details" data-bind="with: Member">
<section id="profile-cover">
<!-- ko if: details.images.cover() == null -->
<img src="/DoitGrad/Content/images/Profile/default_cover.jpg">
<!-- /ko -->
<!-- ko ifnot: details.images.cover() == null --><!-- /ko -->
<section class="change-cover">Change cover photo</section>
<section id="profile-picture">
<!-- ko if: details.images.profile() == null -->
<img src="/DoitGrad/Content/images/Profile/default_avatar.png">
<!-- /ko -->
<!-- ko ifnot: details.images.profile() == null --><!-- /ko -->
<h2 id="profile-name" data-bind="text: title">Cameron Pearce</h2>
<section id="profile-username" data-bind="text: details.username">CameronPearce91</section>
</section>
</section>
<section id="profile-wrapper">
<section id="profile-about" data-bind="text: description">Since I have been at uni, I believe I have achieved a lot. I took a year out of my studies to do a work placement year with Xerox based in Welwyn Garden City, primarily focusing on developing C# Web Applications on the MVC framework. It was the best thing I could have done for my career I believe, I have certainly learnt a lot.</section>
#Html.Partial("partialname")
Partial View
<section class="profile-detail-holder">
<section class="add" data-form="addSkill">+</section>
<h2 class="profile-detail-header">Skill Wall</h2>
<ul id="profile-skillwall" data-bind="foreach: details.skills()"></ul>
</section>
<section class="dialog-form" data-form="addSkill">
<section class="form-cover grey"></section>
<section class="form-content">
<section class="form-wrap">
<section class="form-close">x</section>
<header class="form-header">Add Skill</header>
<section class="form-body">
<form id="dig-member-addskill" class="area" method="post" action="#">
<input type="text" data-bind="text: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>
<ul data-bind="foreach: $root.FilteredSkills"></ul>
<section class="ui-button submit">
<input type="submit" value="Add">
</section>
</form>
</section>
</section>
</section>
</section>
If anyone needs anymore information, feel free to ask.
I think I've spotted it, and it's fairly simple:
<input type="text" data-bind="text: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>
you are using a text-binding on the input field, so updating the input won't change the observable. Use a value-binding instead:
<input type="text" data-bind="value: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>