what i'm trying to do is call a funcation like below, further i want to pass current element (item) to function as parameter.
<tr rv-each-item="items:models">
<td>{ item:Name }</td>
</tr>
var selectedItem = function (item)
{
console.log(item);
}
while searching around i found below discussion helpful but could not solve my problem as it does not implement backbone
https://github.com/mikeric/rivets/issues/554
Rivets.js: When button is clicked, call a function with an argument from a data binding
While working around i found different approaches that can help, posting here if someone can get help or improve if there is any thing needs to.
Option 1
<body>
<div rv-each-book="model.books">
<button rv-on-click="model.selectedBook | args book">
Read the book {book}
</button>
</div>
</body>
<script type="text/javascript">
rivets.formatters["args"] = function (fn) {
var args = Array.prototype.slice.call(arguments, 1);
return function () {
return fn.apply(null, args);
};
};
rvBinder = rivets.bind(document.body, {
model: {
selectedBook: function (book) {
alert("Selected book is " + book);
},
books: ["Asp.Net", "Javascript"]
}
});
</script>
Option 2
Create a custom binder
<body>
<div rv-each-book="books">
<a rv-cust-href="book">
Read the book {book}
</a>
</div>
</body>
<script type="text/javascript">
rivets.binders['cust-href'] = function (el, value) {
//el.href = '/Books/Find/' + value;
//OR
el.onclick = function() { alert(value);};
}
rvBinder = rivets.bind(document.body, {
books: ["Asp.Net", "Javascript"]
});
</script>
Option 3
As I was using rivetsjs with backbone, i can also get advantage of events on backbone view
// backbone view
events: {
'click #linkid': 'linkclicked'
},
linkclicked: function (e){
console.log(this.model.get("Name"));
},
<td><a id="linkid" href="#">{ item:Name }</a></td>
Related
I have the following code in html:
<ul data-bind="template: {name:'location', foreach:locations}">
</ul>
<script type="text/html" id="location">
<li>
<a href='#' id="search_results" data-bind='text: title' class='w3-bar-item'></a>
</li>
</script>
and the following code in viewModel:
var locations = [ (location lists)
];
var viewModel = {
title: ko.observable("Attractions in Seattle, Washington"),
query: ko.observable(""),
};
viewModel.locations = ko.dependentObservable(function(){
var search = this.query().toLowerCase();
return ko.utils.arrayFilter(locations, function(location) {
return location.title.toLowerCase().indexOf(search) >= 0;
});
}, viewModel);
ko.applyBindings(viewModel);
as shown below:
demo
and there is the following code in one of my regular javascript functions
$("#search_results").on('click', function() {
var context = ko.contextFor(this);
for (var i = 0; i < placeMarkers.length; i++) {
temp = placeMarkers[i].title + ", Seattle";
if (temp == context.$data.title) {
getPlacesDetails(placeMarkers[i], placeInfoWindow);
}
}
});
I am trying to dynamically show the result based on what context the user clicks, but my function works only for the first item in the list (only Space Needle, in this case). How can I fix it? what would be knockout.js-ic way?
+
I wrote like this inside of viewModel:
show_infowindow: function() {
var context = ko.contextFor(this);
for (var i = 0; i < placeMarkers.length; i++) {
temp = placeMarkers[i].title + ", Seattle";
if (temp == context.$data.title) {
getPlacesDetails(placeMarkers[i], placeInfoWindow);
}
}
}
where
<a href='#' data-bind='text: title, click: show_infowindow' class='search_results w3-bar-item'></a>
and now nothing is working, how can I fix this?
I suggest you create viewModel function and use the new operator whenever you have a click function or a computed property (or dependentObservable prior to ko 2.0). This will reduce the pain of debugging and understanding what this means in callbacks.
So remove the jquery click event handler and change your viewmodel to:
var viewModel = function() {
var self = this;
self.title = ko.observable("Attractions in Seattle, Washington");
self.query = ko.observable("");
self.locations = ko.computed(function(){
var search = self.query().toLowerCase();
return ko.utils.arrayFilter(locations, function(location) {
return location.title.toLowerCase().indexOf(search) >= 0;
});
}
self.show_infowindow = function(location){
// "location" parameter has the current location object being clicked
// you can use it directly instead of ko.contextFor(this);
}
};
// don't forget the "new" keyword
ko.applyBindings(new viewModel());
Change your template to add a click binding like this:
<script type="text/html" id="location">
<li>
<a href='#' id="search_results" data-bind='text: title, click:$parent.show_infowindow' class='w3-bar-item'></a>
</li>
</script>
Since you are using the click binding inside a foreach, you need to prefix the click function with $parent keyword to get the proper binding context. Without $parent, knockout will look for show_infowindow in each location object instead of your viewModel.
Here's another useful answer on the differences between viewModel as an object literal vs a function
I am working on a plugin that allows to add an item to the shopping cart. The plugin is mine, and the shopping cart belongs to the customer. The idea is to add my plugin with a few lines of code to configure.
Once an item is bought, I need to call a function on the customer page so it can be added to the cart, but I didn't manage.
I have this code:
<script type="text/javascript">
$(document).ready(function () {
//plugin1.CallBackTest;
});
var plugin1 = new function() {
this.CallBackTest = function (str) {
console.log("callback in class");
FunctionIWantToCall(str);
}
}
function FunctionIWantToCall(str) {
console.log("callback on client " + str);
}
</script>
<div class="htmlcreatedbyplugin">
<button onclick="CallBackTest('something')">send back</button>
</div>
if I change this line to
send back
it will work, but this html is generated through the plugin class, and I don't know how to retrieve the name of the variable.
The customer should be able to tell the plugin which function to call, e.g
plugin1.AddToCartFunction = FunctionIWantToCall;
Any ideas?
Thank you Stavros Angelis, it works:
<script type="text/javascript">
$(document).ready(function () {
plugin1.CallBackFunction = "FunctionIWantToCall";
});
var plugin1 = new function () {
var myplugin = this;
this.CallBackFunction = "";
this.CallBackTest = function () {
console.log("callback in class");
var item = JSON.parse($(this).attr("vals"));
if (myplugin.CallBackFunction != "") {
window[myplugin.CallBackFunction](item);
}
}
function BindCartButtons() {
console.log("binding buttons")
$(document).on("click", ".htmlcreatedbyplugin > button", myplugin.CallBackTest);
}
BindCartButtons();
}
function FunctionIWantToCall(item) {
console.log("callback on client " + item.id);
}
</script>
<div class="htmlcreatedbyplugin">
<button type="button" vals="{"id":12345, "color":"blue"}">Buy Me</button>
</div>
I am looking for a way to synchronize arrays within an AngularJS controller.
Example:
var input = [1];
var synchArray = DatabindToModifiedInput()
// synchArray is something like this:
// [{name:someObject}, {name:inputElement, Id:1}]
input.push(2);
// synchArray should be updated automatically:
// [{name:someObject}, {name:inputElement, Id:1}, {name:inputElement, Id:2}]
Obviously i could register $watches and modify synchArray when input changes but that doesn't feel very angular-like.
Question:
I am tempted to write a filter which i can apply to the input-array. However this still feels like i am missing some obvious way to bind the data together within a controller/service.
Is there some way to utilize ngRepeat or some databinding-mechanism for this? Or should i maybe approach this in a completely different way?
You should likely make an extended array object as demonstrated in this post by Jacob Relkin.
That way you could do more than just one array or event when something happens.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.myClonedArray = [];
$scope.myExtendedArray;
// Extended array type
function EventedArray(handler) {
this.stack = [];
this.mutationHandler = handler || function() {};
this.setHandler = function(f) {
this.mutationHandler = f;
};
this.callHandler = function(event, obj) {
if (typeof this.mutationHandler === 'function') {
this.mutationHandler(event, obj);
}
};
this.push = function(obj) {
this.stack.push(obj);
this.callHandler('push', obj);
};
this.pop = function() {
var obj = this.stack.pop();
this.callHandler('pop', obj);
return obj;
};
this.getArray = function() {
return this.stack;
}
}
var handler = function(event, item) {
console.log(event, item);
if (event === 'push') {
$scope.myClonedArray.push(item);
} else if (event === 'pop') {
$scope.myClonedArray.pop();
}
};
$scope.myExtendedArray = new EventedArray(handler);
//or
// $scope.myExtendedArray = new EventedArray();
// $scope.myExtendedArray.setHandler(handler);
$scope.addItem = function() {
$scope.myExtendedArray.push($scope.inputValue);
};
$scope.popItem = function() {
$scope.myExtendedArray.pop();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<body ng-controller="MyCtrl">
<input type="text" ng-model="inputValue" />
<button ng-click="addItem()">Add</button>
<button ng-click="popItem()">Pop</button>
<p>Custom Array</p>
<ul>
<li ng-repeat="item in myExtendedArray.stack track by $index">
{{item}}
</li>
</ul>
<p>Cloned Array</p>
<ul>
<li ng-repeat="item in myClonedArray track by $index">
{{item}}
</li>
</ul>
</body>
</html>
I am new to knockout. For my problem, I am trying to make it so that for each project, there is a button and textarea. The textarea will be hidden upon page load. If I click the button, it will show the textarea (toggle). Currently, if I click the button, ALL textareas on the page will show, rather than just the corresponding textarea.
I'm hoping the fix for this isn't too dramatic and involving a complete reworking of my code as by some magic, every other functionality has been working thus far. I added the {attr id: guid} (guid is a unique identifier of a project retrieved from the database) statement in an attempt to establish a unique ID so that the right controls were triggered...although that did not work.
Sorry I do not have a working jfiddle to show the issue... I tried to create one but it does not demonstrate the issue.
JS:
//if a cookie exists, extract the data and bind the page with cookie data
if (getCookie('filterCookie')) {
filterCookie = getCookie('filterCookie');
var cookieArray = filterCookie.split(",");
console.log(cookieArray);
$(function () {
var checkboxes = new Array();
for (var i = 0; i < cookieArray.length; i++) {
console.log(i + cookieArray[i]);
checkboxes.push(getCheckboxByValue(cookieArray[i]));
//checkboxes.push(document.querySelectorAll('input[value="' + cookieArray[i] + '"]'));
console.log(checkboxes);
checkboxes[i].checked = true;
}
})
filterCookie = getCookie('filterResultsCookie');
cookieArray = filterCookie.split(",");
filterCookieObj = {};
filterCookieObj.action = "updateProjects";
filterCookieObj.list = cookieArray;
$.ajax("/api/project/", {
type: "POST",
data: JSON.stringify(filterCookieObj)
}).done(function (response) {
proj = response;
ko.cleanNode(c2[0]);
c2.html(original);
ko.applyBindings(new ProjectViewModel(proj), c2[0]);
});
}
//if the cookie doesn't exist, just bind the page
else {
$.ajax("/api/project/", {
type: "POST",
data: JSON.stringify({
action: "getProjects"
})
}).done(function (response) {
proj = response;
ko.cleanNode(c2[0]);
c2.html(original);
ko.applyBindings(new ProjectViewModel(proj), c2[0]);
});
}
View Model:
function ProjectViewModel(proj) {
//console.log(proj);
var self = this;
self.projects = ko.observableArray(proj);
self.show = ko.observable(false);
self.toggleTextArea = function () {
self.show(!self.show());
};
};
HTML:
<!-- ko foreach: projects -->
<div id="eachOppyProject" style="border-bottom: 1px solid #eee;">
<table>
<tbody>
<tr>
<td><a data-bind="attr: { href: '/tools/oppy/' + guid }" style="font-size: 25px;"><span class="link" data-bind=" value: guid, text: name"></span></a></td>
</tr>
<tr data-bind="text: projectDescription"></tr>
<%-- <tr data-bind="text: guid"></tr>--%>
</tbody>
</table>
<span class="forminputtitle">Have you done project this before?</span> <input type="button" value="Yes" data-bind="click: $parent.toggleTextArea" class="btnOppy"/>
<textarea placeholder="Tell us a little of what you've done." data-bind="visible: $parent.show, attr: {'id': guid }" class="form-control newSessionAnalyst" style="height:75px; " /><br />
<span> <input type="checkbox" name="oppyDoProjectAgain" style="padding-top:10px; padding-right:20px;">I'm thinking about doing this again. </span>
<br />
</div><br />
<!-- /ko -->
Spencer:
function ProjectViewModel(proj) {
//console.log(proj);
var self = this;
self.projects = ko.observableArray(proj);
self.projects().forEach(function() { //also tried proj.forEach(function())
self.projects().showComments = ko.observable(false);
self.projects().toggleComments = function () {
self.showComments(!self.showComments());
};
})
};
It's weird that
data-bind="visible: show"
doesn't provide any binding error because context of binding inside ko foreach: project is project not the ProjectViewModel.
Anyway, this solution should solve your problem:
function ViewModel() {
var self = this;
var wrappedProjects = proj.map(function(p) {
return new Project(p);
});
self.projects = ko.observableArray(wrappedProjects);
}
function Project(proj) {
var self = proj;
self.show = ko.observable(false);
self.toggleTextArea = function () {
self.show(!self.show());
}
return self;
}
The problem is that the show observable needs to be defined in the projects array. Currently all the textareas are looking at the same observable. This means you'll have to move the function showTextArea into the projects array as well.
Also you may want to consider renaming your function or getting rid of it entirely. Function names which imply they drive a change directly to the view fly in the face of the MVVM pattern. I'd recommend a name like "toggleComments" as it doesn't reference a view control.
EDIT:
As an example:
function ProjectViewModel(proj) {
//console.log(proj);
var self = this;
self.projects = ko.observableArray(proj);
foreach(var project in self.projects()) {
project.showComments = ko.observable(false);
project.toggleComments = function () {
self.showComments(!self.showComments());
};
}
};
There is probably a much cleaner way to implement this in your project I just wanted to demonstrate my meaning without making a ton of changes to the code you provided.
I want to use a select x-editable in my Meteor application. My goal is to assign users to groups. This should be reactive, so when you assign a user, other clients should see the changes. The current problem is that the assignment works (data-value changes), but only the user who made the change is able to see the new value.
Here is my code:
Template.userGroup.rendered = function() {
var groupId = this.data._id;
var sourceUsers = [];
Users.find().forEach(function(user) {
sourceUsers.push({value: user._id, text: user.username});
});
Tracker.autorun(function() {
$('.assign-user').editable("destroy").editable({
emptytext: "Empty",
source: sourceUsers,
success: function(response, result) {
if (result) {
Groups.update({_id: groupId}, {$set: {adminId: result}});
}
}
});
});
};
<template name="userGroup">
</template>
I already tried to "destroy" the stale x-editable and put it inside the Tracker.autorun function, but unfortunately, this does not work.
Any help would be greatly appreciated.
I don't use Tracker.autorun but I use x-editable for inline editing like this:
(also used it for group assigments - just like your case, but found it too clumsy on the UI side). Anyway, here's my code:
Template
<template name="profileName">
<td valign='top'>
<div id="profileNameID" class="editable" data-type="text" data-rows="1">{{profile.name}}</div>
</td>
</template>
And on the JS side
Template.profileName.rendered = function () {
var Users = Meteor.users;
var container, grabValue, editableColumns, mongoID,
_this = this;
var container = this.$('#profileNameID');
var editableColumns = container.size();
grabValue = function () {
var gValue = $.trim(container.html());
return gValue;
};
$.fn.editable.defaults.mode = 'inline';
return container.editable({
emptytext: 'Your name goes here',
success: function (response, newValue) {
var mongoID = removeInvisibleChars($(this).closest("tr").find(".mongoid").text());
var editedUser = _users.findOne({
_id: mongoID
});
Meteor.users.update(mongoID, {
$set: {
"profile.name": newValue
}
});
return container.data('editableContainer').formOptions.value = grabValue;
}
});
Update happens immediately on all subscribed authorized clients.