I'm developing an interface witch is a searcher, so it has filters, but this filters are made with an ajax call named Filter in each element the user selects. I'm using knockout to populate the values with a default search, but for some reason from the server comes an array kike this rating: [5,4,3,2] and other arrays with a different desgin like categories:[{id:2, name:"PC components", count: 50}].
Issue 1: when I make click on one of the elements populated from the rating array into the page, using:
<!-- ko foreach: rating -->
<label>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedRatings, click: $root.Filter " />
<span data-bind="text: $data + ' Stars'"></span>
</label>
<!-- /ko -->
it make the call but the checkbox is not checked, this is checked when i check some other. I try a many kind of things but nothing solve the problem.
Issue 2: When I check some of the checkboxes, the make the ajax call, but they show as checked when the action finish, no in the first selection. Why is that.
Here is my code:
//observable
function Searcher(){
self = this;
self.types = ko.observableArray();
self.selectedTypes = ko.observableArray();
self.rating = ko.observableArray();
self.selectedRatings = ko.observableArray([]);
//Rating
self.noneRating = ko.observable(true);
this.selectedRatings.subscribe(function (newValue) {
self.noneRating(newValue && newValue.length == 0 ? true : false);
}, self);
self.noneRating.subscribe(function (newValue) {
if (newValue) {
self.selectedRatings.removeAll();
self.Filter();
}
});
//Styles
self.noneStyle = ko.observable(true);
this.selectedStyles.subscribe(function (newValue) {
self.noneStyle(newValue && newValue.length == 0 ? true : false);
}, self);
self.noneStyle.subscribe(function (newValue) {
if (newValue) {
self.selectedStyles.removeAll();
self.Filter();
}
});
self.getSearchFilters = function () {
debugger;
var json = ko.toJSON({ type: self.selectedTypes(), rating: self.selectedRatings()});
return json;
};
self.Filter = function () {
self.filterbuttonActive(false);
$.ajax({
type: "POST",
url: "url/Find",
data: "{ 'search':'" + + "', 'filter': '" + self.getFilters() + "' }",
contentType: "application/json; charset=utf-8",
cache: false,
beforeSend: function () {
//something here
},
success: function (result) {
//something here to load data
},
error: function (a, desc, error) {
// some error
},
});
};
}
//call ViewModel on document.ready
$(function () {
var searcher= new Searcher();
searcher.Search();
ko.applyBindings(searcher);
});
//the page
<div class="input-wrap">
<label for="type_short">
<b>Type:</b>
</label>
<label>
<input type="checkbox" data-bind="checked: noneType" />
<span>Any</span>
</label>
<!-- ko foreach: types -->
<label>
<input type="checkbox" data-bind="checkedValue: $data.id, checked: $root.selectedTypes, click: $root.Filter " />
<span data-bind="text: $data.name"></span>
<strong class="filter_result_count" data-bind="text: $data.count"></strong>
</label>
<!-- /ko -->
</div>
<div class="input-wrap">
<label for="rating">
<b>Rating:</b>
</label>
<label>
<input type="checkbox" data-bind="checked: noneRating" />
<span>Any</span>
</label>
<!-- ko foreach: rating -->
<label>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedRatings, click: $root.Filter " />
<span data-bind="text: $data + ' Stars'"></span>
</label>
<!-- /ko -->
</div>
Some help would be appretiated, thank you.
Try removing the
click: $root.Filter
binding. Instead, call self.Filter whenever selectedRatings changes by including
self.selectedRatings.subscribe(Filter);
at the end of your Searcher view model.
Related
I am new to Knockout JS and think it is great. The documentation is great but I cannot seem to use it to solve my current problem.
The Summary of my Code
I have two viewmodels represented by two js scripts. They are unified in a parent js file. The save button's event is outside
both foreach binders. I can save all data in the details foreach.
My Problem
I need to be able to include the value from the contacts foreach binder with the values from the details foreach binder.
What I have tried
I have tried accessig the data from both viewmodels from the parent viewmodel and sending the POST request to the controller from there but the observeableArrays show undefined.
Create.CSHTML (Using MVC5 no razor)
<div id="container1" data-bind="foreach: contacts">
<input type="text" data-bind="value: contactname" />
</div>
<div data-bind="foreach: details" class="card-body">
<input type="text" data-bind="value: itemValue" />
</div>
The save is outside of both foreach binders
<div class="card-footer">
<button type="button" data-bind="click: $root.save" class="btn
btn-success">Send Notification</button>
</div>
<script src="~/Scripts/ViewScripts/ParentVM.js" type="text/javascript"></script>
<script src="~/Scripts/ViewScripts/ViewModel1.js" type="text/javascript"></script>
<script src="~/Scripts/ViewScripts/ViewModel2.js" type="text/javascript"></script>
ViewModel1
var ViewModel1 = function (contacts) {
var self = this;
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
return {
contactName: contact.contactName
};
}));
}
ViewModel2
var ViewModel2 = function (details) {
var self = this;
self.details = ko.observableArray(ko.utils.arrayMap(details, function (detail) {
return {
itemNumber: detail.itemValue
};
}));
}
self.save = function () {
$.ajax({
url: baseURI,
type: "POST",
data: ko.toJSON(self.details),
dataType: "json",
contentType: "application/json",
success: function (data) {
console.log(data);
window.location.href = "/Home/Create/";
},
error: function (error) {
console.log(error);
window.location.href = "/Homel/Create/";
}
});
};
ParentViewModel
var VM1;
var VM2;
var initialContactInfo = [
{
contactPhone: ""
}
]
var initialForm = [
{
itemValue: ""
]
}
$(document).ready(function () {
if ($.isEmptyObject(VM1)) {
ArnMasterData = new ViewModel1(initialContactInfo);
ko.applyBindings(VM1, document.getElementById("container1"));
}
if ($.isEmptyObject(VM2)) {
VM2 = new ViewModel2(initialForm);
ko.applyBindings(VM2, document.getElementById("container2"));
}
});
I'm having trouble getting started with binding a Form to a remote Datasource in Kendo UI for javascript
I have verified that the ajax call returns the correct JSONP payload, e.g:
jQuery31006691693527470279_1519697653511([{"employee_id":1,"username":"Chai"}])
Below is the code:
<script type="text/javascript">
$(document).ready(function() {
var viewModel = kendo.observable({
employeeSource: new kendo.data.DataSource({
transport: {
read: {
url: baseUrl + "/temp1",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
schema: {
model: {
id: "employee_id",
fields:{
employee_id: { type: "number" },
username: { type: "string" }
}
}
}
}),
hasChanges: false,
save: function() {
this.employeeSource.sync();
this.set("hasChanges", false);
},
change: function() {
this.set("hasChanges", true);
}
});
kendo.bind($("#item-container"), viewModel);
viewModel.employeeSource.read();
});
</script>
<div id="item-container">
<div class="row">
<div class="col-xs-6 form-group">
<label>Username</label>
<input class="form-control k-textbox" type="text" id="username" data-bind="value: username, events: { change: change }" />
</div>
</div>
<button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button>
</div>
No errors are thrown, but I was expecting my username text form field to be populated with the value 'Chai', and so on.. but it doesn't
Your textbox is bound to a username property but this doesn't exist on your view-model, nor is it being populated anywhere. Assuming your datasource correctly holds an employee after your call to read(), you will need to extract it and set it into your viewmodel using something like this:
change: function(e) {
var data = this.data();
if (data.length && data.length === 1) {
this.set("employee", data[0]);
this.set("hasChanges", true);
}
}
And modify the binding(s) like this:
<input class="form-control k-textbox" type="text" id="username"
data-bind="value: employee.username, events: { change: change }" />
You should also be aware that the change event is raised in other situations, so if you start using the datasource to make updates for example, you'll need to adapt that code to take account of the type of request. See the event documentation for more info. Hope this helps.
I have custom dropdown (made with using divs and list)
<div class="primary-tags-wrapper">
<div id="primaryTag" class="primary-tags-dropdown ui-dropdown fl">
<div class="fl">
<div class="primary-tag-selected-value" data-bind="text: showPrimaryTag"></div>
</div>
<div class="fr" data-primary="tag">
<div class="fa fa-caret-down"></div>
<ul class="primary-tags-list">
<li class="primary-tags-item">
<input class="primary-tags-item-radio" type="radio" name="primary-tag" id="primary-tag-default" data-bind="checkedValue: null, checked: primaryTag"/>
<label class="primary-tags-item-label" for="primary-tag-default">Set Primary Tag</label>
</li>
<!-- ko foreach: tags -->
<li class="primary-tags-item">
<input class="primary-tags-item-radio" type="radio" name="primary-tag" data-bind="attr: { 'id': 'primary-tag-' + $index() }, checkedValue: $data, checked: $parent.primaryTag"/>
<label class="primary-tags-item-label" data-bind="attr: { 'for': 'primary-tag-' + $index() }, text: $data"></label>
</li>
<!-- /ko -->
<li class="primary-tags-item">
<input type="button" class="btn green-btn" data-bind="click: savePrimaryTag" value="Save"/>
</li>
</ul>
</div>
</div>
</div>
To it I have binded knockout ViewModel
var TagsViewModel = function (inputModel) {
var vm = this;
vm.tags = ko.observableArray(inputModel.tags);
vm.allTags = ko.observableArray(inputModel.allTags);
vm.primaryTag = ko.observable(inputModel.primaryTag);
vm.refreshTags = function () {
var data = vm.tags().slice(0);
vm.tags([]);
vm.tags(data);
};
vm.savePrimaryTag = function() {
var data = {
locationId: inputModel.locationId,
reviewId: inputModel.reviewId,
tag: vm.primaryTag()
};
initializeAjaxLoader();
$.post('/data/reviews/primaryTag',
data,
function(response) {
if (!response.status) {
vm.primaryTag('');
} else {
vm.primaryTag(response.tag);
}
removeAjaxLoader();
});
}
vm.showPrimaryTag = ko.pureComputed(function() {
var primaryTagVal = vm.primaryTag();
if (primaryTagVal) {
return 'Primary Tag: ' + primaryTagVal;
}
return DEFAULT_PRIMARY_TAG;
},
vm);
vm.noPrimaryTagSelected = ko.pureComputed(function() {
var primaryTagVal = vm.primaryTag();
if (primaryTagVal) {
return false;
}
return true;
},
vm);
}
In dropdown I have default option : "Set Primary Tag" which should be selected when primaryTag is null or string.Empty. Currently it is what I can't achive.
So is it possible to set multiple checkedValue to radio button, or there are another way to support this "feature"
When knockout handles the checked binding, it compares primitives using ===. This means, as you've noticed, that a checked value of null doesn't work with "", false, undefined or 0.
If you somehow can't prevent your selected value to be initialized as an empty string, you could bind to a computed layer that "sanitizes" the output.
All of the radio inputs write their value to a computed observable.
The computed observable has a private backing field to store raw input
The read method makes sure all falsey values are returned as null
var VM = function() {
// Notice this can be initialized as any falsey value
// and the checkedValue=null binding will work.
const _selectedTag = ko.observable("");
this.selectedTag = ko.computed({
read: function() {
// Explicitly "cast" all falsey values
// to `null` so it can be handled by
// knockout's `checked` binding:
return _selectedTag() || null;
},
write: _selectedTag
});
this.tags = [
{ label: "one" },
{ label: "two" },
{ label: "three" },
{ label: "four" },
]
};
ko.applyBindings(new VM());
label { display: block }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
<label>
<input type="radio" data-bind="checked: selectedTag, checkedValue: null">
Don't use a tag
</label>
<!-- ko foreach: tags -->
<label>
<input type="radio" data-bind="checked: $parent.selectedTag, checkedValue: $data">
<span data-bind="text: label"></span>
</label>
<!-- /ko -->
</div>
I am trying to implement a generic ASP.net MVC view. The UI should display a list of available and selected items loading data (basically list of string) from server. User can make changes into the list i.e. can select new items from available item list and also can remove items from selected list.
I wanted to do it using KnockoutJS as to take advantage of binding.
I manage to complete it upto the point everything is working except showing selected item as checked when the view is initialized in available list. E.g. As Shown Here
I tried various options (using template (closest to what I want to achieve), Checked attr, possible options), the issue is if I manage to display item checked some other functionality breaks. Tried defining a template but could not get it to work in my case.
HTML:
<div class='moverBoxOuter'>
<div id='contactsList'>
<span data-bind="visible: availableItems().length > 0">Available countries: </span>
<ul data-bind="foreach: availableItems, visible: availableItems().length > 0">
<li>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedItems" />
<span data-bind="text: title"></span>
</li>
</ul>
<span data-bind="visible: selectedItems().length > 0">Selected countries: </span>
<ul data-bind="foreach: selectedItems, visible: selectedItems().length > 0">
<li>
<span data-bind="text: title"></span>
Delete
</li>
</ul>
</div>
JS:
var initialData = [
{
availableItems: [
{ title: "US", isSelected: true },
{ title: "Canada", isSelected: false },
{ title: "India", isSelected: false }]
},
{
selectedItems: [
{ "title": "US" },
{ "title": "Canada" }
]
}
];
function Item(titleText, isSelected) {
this.title = ko.observable(titleText);
this.isSelected = ko.observable(isSelected);
}
var SelectableItemViewModel = function (items) {
// Data
var self = this;
self.availableItems = ko.observableArray(ko.utils.arrayMap(items[0].availableItems, function (item) {
return new Item(item.title, item.isSelected);
}));
self.selectedItems = ko.observableArray(ko.utils.arrayMap(items[1].selectedItems, function (item) {
return new Item(item.title, item.isSelected);
}));
// Operations
self.selectItem = function (item) {
self.selectedItems.push(item);
item.isSelected(!item.isSelected());
};
self.removeItem = function (removedItem) {
self.selectedItems.remove(removedItem);
$.each(self.availableItems, function (item) {
if (item.title === removedItem.title) {
item.isSelected = false;
}
});
};
}
var vm = new SelectableItemViewModel(initialData);
$(document).ready(function () {
ko.applyBindings(vm);
});
Could you please help, see jsfiddle below:
http://jsfiddle.net/sbirthare/KR4a6/6/
**Update: Follow up question below **
Its followup question:
I need to add a combobox on same UI e.g. for US state. The available items are counties, based on user selection in state combo I need to filter out counties. I am getting data from server using AJAX and its all successful BUT the displayed list is not refreshing. I was expecting having binding setup correctly, if we change the observable array in viewmodel, the UI should change. I tried forcing change to availableItems but it just display all items. Please see if you can spot the problem in below code where I am updating ViewModel observable array.
function multiselect_change() {
console.log("event: openmultiselect_change");
var selectedState = $("#stateDropdownSelect").val();
var propertyName = $("#PropertyName").val();
var searchId = #Model.SearchId;
var items;
var model = { propertyName: propertyName, searchId: searchId, stateName: selectedState };
$.ajax({
url: '#Url.Action("GetFilterValues", "Search")',
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'html',
data: JSON.stringify(model)
})
.success(function(result) {
debugger;
items = JSON.parse(result);
vm.availableItems(items.AvailableItems);
//vm.availableItems.valueHasMutated();
//var item = document.getElementById('availableItemId');
//ko.cleanNode(item);
//ko.applyBindings(vm, item);
vm.filter(selectedState);
})
.error(function(xhr, status) {
alert(status);
});
}
As user3426870 mentioned, you need to change the value you passed to the checked binding to boolean.
<input type="checkbox" data-bind="checkedValue: $data, checked: isSelected" />
Also, I don't think you need to have selectedItems in the initial data.
Instead in the viewModel, you can do something like:
self.selectedItems = ko.computed(function() {
return ko.utils.arrayFilter(self.availableItems(), function (item) {
return item.isSelected();
});
});
It's because you give an array to the binding checked while it's supposed to be a value comparable to true or false (like undefind or an empty string).
I would use a function checking if the $data is in your array and returning a boolean to your binding.
Something like that!
I have a form which generates a list options for the user, each option has a check-box, a label and an input field. The input field should only be shown whilst the check-box is ticked. The options are generated through a JSON call.
However, knockout doesn't seem to be doing what I would have expected when using the visible binding. When I check a row, the text box is correctly shown but when I uncheck it, the text box stays shown.
I suspect this is something to-do with the observable "selected" being overridden or something like that but I am stuck for ideas.
Here is a fiddle showing the issue: http://jsfiddle.net/qccQs/2/
Here is the HTML I am using in the fiddle:
<div data-bind="template: { name: 'reason-template', foreach: reasonList }"></div>
<script type="text/html" id="reason-template">
<div>
<input type="checkbox" data-bind="value: selected" />
<span data-bind="text: name"></span>
<input type="text" class="datepicker" data-bind="value: date, visible: selected" />
</div>
</script>
Here is the javascript that I am using in the fiddle:
function ReasonItem(name) {
this.name = ko.observable(name);
this.date = ko.observable(null);
this.selected = ko.observable(false);
};
function MyViewModel() {
var self = this;
self.reasonList = ko.observableArray([ ])
};
var vm = new MyViewModel();
new Request.JSON({
url: '/echo/json/',
data: {
json: JSON.encode({
data: [
{ name: "Reason 1", selected: false, date: null },
{ name: "Reason 2", selected: false, date: null },
{ name: "Reason 3", selected: false, date: null }
]
}),
delay: 0
},
onSuccess: function(response) {
$.each(response.data, function(index, reason) {
vm.reasonList.push(new ReasonItem(reason.name));
});
}
}).send();
ko.applyBindings(vm);
Any ideas on how I can get this to behave like I expected it to?
For inputs of checkbox type you need to use checked instead of value:
<input type="checkbox" data-bind="checked: selected" />
See Knockout Documentation.