The selection is made when the elements in the top list are clicked. When you click on the bottom elements, it is deleted from the list. However, the checkbox on the top list was not false. How can I fix it.
function User(data) {
this.userName = ko.observable(data.userName);
this.selected = ko.observable(data.selected);
}
var dataSource = [
new User({
userName: "test1",
selected: false
}),
new User({
userName: "test2",
selected: false
})
];
function UsersViewModel() {
var self = this;
//initial data may have two IEnumerables
self.AllUsers = ko.observableArray(dataSource);
self.SelectedUsers = ko.observableArray([]);
self.selectedUserNames = ko.observableArray([]);
remove: function myfunction() {
SelectedUsers().remove(this);
}
self.selectedUserNames.subscribe(function(newValue) {
var newSelectedUserNames = newValue;
var newSelectedUsers = [];
ko.utils.arrayForEach(newSelectedUserNames, function(userName) {
var selectedUser = ko.utils.arrayFirst(self.AllUsers(), function(user) {
return (user.userName() === userName);
});
newSelectedUsers.push(selectedUser);
});
self.SelectedUsers(newSelectedUsers);
});
self.remove = function(e) {
self.SelectedUsers.remove(e);
}
}
ko.applyBindings(new UsersViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Available
<ul data-bind="foreach: AllUsers, visible: AllUsers().length > 0">
<li>
<!--<div data-bind="click: $parent.SelectedUser">-->
<input type="checkbox" name="checkedUser" data-bind="value: userName, checked: $root.selectedUserNames" />
<span data-bind="text: userName"></span>
<!--</div>-->
</li>
</ul>
<br />Selected
<ul data-bind="foreach: SelectedUsers, visible: SelectedUsers().length > 0">
<li data-bind="click: $parent.remove">
<span data-bind="text: userName"></span>
</li>
</ul>
I haven't used Knockout.js in a while, but it looks like your problem is that the remove() method is removing users from the SelectedUsers observable, when you should actually be removing user names from the selectedUserNames observable instead.
Based on the way you have the binding set up, you are subscribing to the selectedUserNames observable and updating the SelectedUsers observable within this subscription. That means that the subscription wasn't being called when you were removing users from the SelectedUsers observable, which explains why you weren't seeing the corresponding user get unchecked when removing a username.
In other words, change the following method:
self.remove = function(e) {
self.SelectedUsers.remove(e);
}
to this instead:
self.remove = function(e) {
self.selectedUserNames.remove(e.userName());
}
Here is an updated example with your full code:
function User(data) {
this.userName = ko.observable(data.userName);
this.selected = ko.observable(data.selected);
}
var dataSource = [
new User({
userName: "test1",
selected: false
}),
new User({
userName: "test2",
selected: false
})
];
function UsersViewModel() {
var self = this;
//initial data may have two IEnumerables
self.AllUsers = ko.observableArray(dataSource);
self.SelectedUsers = ko.observableArray([]);
self.selectedUserNames = ko.observableArray([]);
self.selectedUserNames.subscribe(function(newValue) {
var newSelectedUserNames = newValue;
var newSelectedUsers = [];
ko.utils.arrayForEach(newSelectedUserNames, function(userName) {
var selectedUser = ko.utils.arrayFirst(self.AllUsers(), function(user) {
return (user.userName() === userName);
});
newSelectedUsers.push(selectedUser);
});
self.SelectedUsers(newSelectedUsers);
});
self.remove = function(e) {
self.selectedUserNames.remove(e.userName());
}
}
ko.applyBindings(new UsersViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Available
<ul data-bind="foreach: AllUsers, visible: AllUsers().length > 0">
<li>
<!--<div data-bind="click: $parent.SelectedUser">-->
<input type="checkbox" name="checkedUser" data-bind="value: userName, checked: $root.selectedUserNames" />
<span data-bind="text: userName"></span>
<!--</div>-->
</li>
</ul>
<br />Selected
<ul data-bind="foreach: SelectedUsers, visible: SelectedUsers().length > 0">
<li data-bind="click: $parent.remove">
<span data-bind="text: userName"></span>
</li>
</ul>
Related
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>
<div data-bind="with: SimpleListModel">
<form data-bind="submit: addItem" >
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
</div>
<div data-bind="with: SimpleListModel2">
<div data-bind="foreach: baselist">
<div>
<span data-bind="text: basename"></span>
<div data-bind="foreach: subItems">
<span data-bind="text: subitemname"></span>
Del
</div>
</div>
<button data-bind="click:$parent.addChild">Add</button>
</div>
</div>
this is the viewmodel
var SimpleListModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
}
}.bind(this); // Ensure that "this" is always this view model
};
var initialData = [
{ basename: "Danny", subItems: [
{ subitemname: "Mobile"},
{ subitemname: "Home"}]
},
{ basename: "Sensei", subItems: [
{ subitemname: "Mobile"},
{ subitemname: "Home"}]
}];
var SimpleListModel2 = function(baselist) {
var self= this;
self.baselist= ko.observableArray(baselist);
self.addChild = function(list) {
alert(list.basename);
}.bind(this);
self.removecard = function (data) {
//tried
data.baselist.subItems.remove(data);
data.subItems.remove(data);
$.each(self.baselist(), function() { this.subItems.remove(data) })
};
};
var masterVM = (function () {
var self = this;
self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);
self.SimpleListModel2= new SimpleListModel2(initialData);
})();
ko.applyBindings(masterVM);
This is a small code snippet i constructed of my project. Can someone make remove card work? last two increments of my questions are of the same type. but this question is the highest i reach.
removecard doesn't work now in this scenario at least for me.
Use $parents[index] to get to specific parent. http://knockoutjs.com/documentation/binding-context.html.
$parents[0] --> parent
$parents[1] --> grand parent
etc
var initialData = [
{ basename: "Danny", subItems: [
{ subitemname: "Mobile"},
{ subitemname: "Home"}]
},
{ basename: "Sensei", subItems: [
{ subitemname: "Mobile"},
{ subitemname: "Home"}]
}];
var SimpleListModel2 = function(baselist) {
var self= this;
self.baselist= ko.observableArray(baselist);
self.addChild = function(list) {
alert(list.basename);
}.bind(this);
self.removecard = function (data) {
//tried
console.log(data);
};
};
var masterVM = (function () {
var self = this;
self.SimpleListModel2= new SimpleListModel2(initialData);
})();
ko.applyBindings(masterVM);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="with: SimpleListModel2">
<div data-bind="foreach: baselist">
<div>
<span data-bind="text: basename"></span>
<div data-bind="foreach: subItems">
<span data-bind="text: subitemname"></span>
Del
</div>
</div>
<button data-bind="click:$parent.addChild">Add</button>
</div>
</div>
I need some help here: https://jsfiddle.net/vhaurnpw/
I want to do a simple list, which is filterable by the input on top and updates itself..
JS/Knockout:
var viewModel = {
query: ko.observable(''),
places: ko.observable(data),
search: function(value) {
viewModel.places = [];
console.log(value)
for (var i = 0; i < data.length; i++) {
if(data[i].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.places.push(data[i]);
}
console.log(viewModel.places);
}
}
};
viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);
HTML:
<form acion="#" data-bind="submit: search">
<input placeholder="Search" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>
<ul data-bind="foreach: places">
<li>
<span data-bind="text: name"></span>
</li>
</ul>
List will be rendered, but it when you type something, it doesn't show you the result.
Instead when you lookup the console, you will see the console.log and it updates just fine!
so how do i refresh my HTML? :(
There are following issues in your code.
places needs to be an ObservableArray and not an Observable so that you can track the addition/removal from the Observable Array. So, change code From places: ko.observable(data) To places: ko.observableArray(data),
viewModel.places is function, so when you assign another value like viewModel.places = [], it is assigning an empty array to the viewModel.places. In order to modify the value of the viewModel.places, you need to call it as a function like viewModel.places([]);
Note: Your code doesn't add the data back in case the textbox is cleared, I hope you got the solution to the problem and you can resolve this issue as well.
Complete Working Code:
var data = [
{ name: 'Isartor'},
{ name: 'Sendlinger Tor'},
{ name: 'Marienplatz'},
{ name: 'Stachus'},
{ name: 'Bayerischer Rundfunk'},
{ name: 'Google München'},
{ name: 'Viktualienmarkt'},
{ name: 'Museumsinsel'},
{ name: 'Tierpark Hellabrunn'},
{ name: 'Allianz Arena'},
{ name: 'Olympia-Park'},
{ name: 'Flaucher-Insel'}
];
var viewModel = {
query: ko.observable(''),
places: ko.observableArray(data),
search: function(value) {
viewModel.places([]);
console.log(value)
for (var i = 0; i < data.length; i++) {
if(data[i].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.places.push(data[i]);
}
console.log(viewModel.places);
}
}
};
viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form acion="#" data-bind="submit: search">
<input placeholder="Search" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>
<ul data-bind="foreach: places">
<li>
<span data-bind="text: name">asd</span>
</li>
</ul>
I am trying to convert the Meteor tutorial app, simple-todo, into a forum. I have a list that populates with Topics with a delete button and a radio button.
What I want to do, is when a Topic's radio button is selected, display all the comments associated with it. I am trying to accomplish this by putting the topicId(originally taskId), used in the tutorial, in a new Collection called Comments. I then query the Comments for that topicId.the comments are mostly copied and pasted topics, so the attributes and functionality of the two is mostly the same.
I, right now, don't know how to get to the topicId from my Template.body.events. If you can help me tie these two DB's together, that would be very helpful.
HTML:
<head>
<title>Forum</title>
</head>
<body>
<div class="login">
{{> loginButtons}}
</div>
<nav class="mainMenu">
<ul>
<li>Home</li>
<li>Forum</li>
<li>About Us</li>
</ul>
</nav>
<div class="container">
<header>
<h1>Forum</h1>
<h2>Post a topic</h2>
{{#if currentUser}}
<form class="new-topic">
<input type="topicalContent" name="topicalContent" placeholder="Type to add new topics" />
</form>
{{/if}}
</header>
<table>
<td class="topicsCol">
<h3>Topics</h3>
<ul class="topicsList">
{{#each topics}}
{{> topic}}
{{/each}}
</ul>
</td>
<td class="commentsCol">
<h3>Comments</h3>
<ul class="commentsList">
{{#each comments}}
{{> comment}}
{{/each}}
</ul>
<input type="commentContent" name="commentContent" placeholder="Type to Comment" />
</td>
</table>
</div>
</body>
<template name="topic">
<li class="{{#if selected}}select{{/if}}">
<button class="delete">×</button>
<span class="topicalContent">{{topicalContent}} -<strong>{{username}}</strong></span>
<input type="radio" name="curTopic" value="{{curTopic}}" />
</li>
</template>
<template name="commentsList">
<li class="comment">
<button class="delete">×</button>
<span class="responseContent">
<strong>
<!-- {{#if username === owner}}
<style="color:red;">OP
{{else}}-->
{{username}}
<!--{{/if}}-->
</strong>: {{responseContent}}</span>
</li>
</template>
JavaScript:
Topics = new Mongo.Collection("topics");
Comments = new Mongo.Collection("comments");
if(Meteor.isServer){
Meteor.publish("topics", function(){
return Topics.find({
$or: [
{ owner: this.userId }
]
});
});
Meteor.publish("comments", function(){
return Comments.find({
$or: [
{ parent: topicId },
{ owner: this.userId }
]
});
});
}
if (Meteor.isClient) {
// This code only runs on the client
Meteor.subscribe("topics");
Meteor.subscribe("comments");
Template.body.helpers({
topics: function() {
return Topics.find({}, {sort: {createdAt: -1}});
},
comments: function () {
return Comments.find({parent: {parent: topicId}}, {sort: {createdAt: -1}});
}
});
Template.body.events({
"submit .new-topic": function (event) {
//Prevent default browser form submit
event.preventDefault();
//Get value from form element
var topicalContent = event.target.topicalContent.value;
if (topicalContent == "") {
throw new Meteor.Error("Empty Input");
}
//Insert a topic into the collection
Meteor.call("addTopic", topicalContent);
//Clear form
event.target.topicalContent.value = "";
},
"submit .commentContent": function (event) {
event.preventDefault();
var commentContent = event.target.commentContent.value;
Meteor.call("addComment", this.topicId);
event.target.commentContent.value= "";
}
});
Template.topic.helpers({
isOwner: function(){
return this.owner === Meteor.userId();
}
});
Template.topic.events({
"click .curTopic": function() {
//Show Comments of selected radio button
Meteor.call("showComments", this._id);
},
"click .delete":function () {
Meteor.call("deleteTopic", this._id);
}
});
Template.comment.helpers({
isOwner: function(){
return this.owner === Meteor.userId();
}
});
Template.comment.events({
"click .delete":function () {
Meteor.call("deleteComment", this._id);
}
});
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}
Meteor.methods({
addTopic:function(topicalContent){
if (!Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
Topics.insert({
topicalContent,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username
});
},
deleteTopic:function(topicId) {
var topic = Topics.findOne(topicId);
if (topic.owner !== Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
else {
Topics.remove(topicId);
}
},
showComments:function (topicId) {
Comments.find({"parent":topicId});
},
addComment:function(commentContent, topicId){
if (!Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
Comments.insert({
commentContent,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username,
parent: topicId
});
},
deleteComment:function(commentId) {
var comment = Comments.findOne(commentId);
if (comment.owner !== Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
else {
Comments.remove(commentId);
}
}
});
One way (and there are many) is to use a session variable to track the current topic. In your topic event handler:
Template.topic.events({
"click .curTopic": function() {
Session.set('topicId',this._id); // set the Session variable
Meteor.call("showComments", this._id);
});
Now everywhere else you're looking for the current topicId you can just use Session.get('topicId');
i am using knockoutjs v3.1.0. i am trying to build a master-detail like view. the problem i am having is that elements are not showing (though they are hiding). my mock code is at http://jsfiddle.net/jwayne2978/qC4RF/3/
this is my html code.
<div data-bind="foreach: users">
<div>Row</div>
<div data-bind="text: username"></div>
<div data-bind="visible: showDetails">
<div data-bind="text: address"></div>
</div>
<div>
<a href="#"
data-bind="click: $root.toggleDetails">
Toggle Div
</a>
</div>
this is my javascript code
var usersData = [
{ username: "test1", address: "123 Main Street" },
{ username: "test2", address: "234 South Street" }
];
var UsersModel = function (users) {
var self = this;
self.users = ko.observableArray(
ko.utils.arrayMap(users, function (user) {
return {
username: user.username,
address: user.address,
showDetails: false
};
}));
self.toggleDetails = function (user) {
user.showDetails = !user.showDetails;
console.log(user);
};
};
ko.applyBindings(new UsersModel(usersData));
what's supposed to happen is that when a user clicks on the link, the corresponding HTML div should show. the console clearly shows that the property is being changed on the user object, but the HTML element's visibility is not changing. i also explicitly made the showDetails property observable, but that did not help.
showDetails : ko.observable(false)
any help is appreciated.
var UsersModel = function (users) {
var self = this;
//var flag=ko.observable(true);
self.users = ko.observableArray(
ko.utils.arrayMap(users, function (user) {
return {
username: user.username,
address: user.address,
showDetails: ko.observable(false) //it should be observable
};
}));
self.toggleDetails = function (user) {
user.showDetails(!user.showDetails());
console.log(user);
};
};
Fiddle Demo