Mike Mike - 6 months ago 21
HTML Question

Mouseover event affect buttons in ALL rows in list and not just on the specific button

I have some collection with dropdown list with regular 'remove' next to each row.
I added an mouseover event to change the 'remove' button's text from "X" to "Remove".
The problem is that the text is changing for ALL buttons and not just for a specific button.

JSFiddle:
http://jsfiddle.net/z22m1798/27/

Javascript:

var CartLine = function(siblings) {
var self = this;

self.availableFilters = ko.computed(function() {
return filters.filter(function(filter) {
return !siblings()
.filter(function(cartLine) { return cartLine !== self })
.some(function(cartLine) {
var currentFilterValue = cartLine.filterValue();
return currentFilterValue &&
currentFilterValue.name === filter.name;
});
});
});

self.filterValue = ko.observable();
};



var Cart = function() {
// Stores an array of filters
var self = this;

self.btnRemoveTxt = ko.observable("X");
self.lines = ko.observableArray([]);
self.lines.push(new CartLine(self.lines))// Put one line in by default

self.sortedLines = ko.computed(function() {
return self.lines().sort(function(lineA, lineB) {
if (lineA.filterValue() && lineA.filterValue().name == "Text") return -1;
if (lineB.filterValue() && lineB.filterValue().name == "Text") return 1;
return 0;
});

});

// Operations
self.addFilter = function() {
self.lines.push(new CartLine(self.lines))
};

self.removeFilter = function(line) {
self.lines.remove(line)
};

self.btnRemoveOver = function() {
console.log("Yey");///////////////
self.btnRemoveTxt("Remove");
}
self.btnRemoveOut = function() {
console.log("Yey");///////////////
self.btnRemoveTxt("X");
}
};

// Some of the Knockout examples use this data
var filters = [{
"filterValues": [{"name": "", }, ], "name": "Text" }, {
"filterValues": [{"name": "Yes",}, {"name": "No", }, ],"name": "Choice1" }, {
"filterValues": [{"name": "Yes",}, {"name": "No", }, ], "name": "Choice2" }];

//Load initial data from server
var JSONdataFromServer = $("#JSONdataFromServer").val();
console.log(JSONdataFromServer);
var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

ko.applyBindings(new Cart());


HTML:

<div class='liveExample'>
<input type="hidden" id="JSONdataFromServer" value='[{ "filterValues": [{"name": "Test"}], "name": "Text" }, { "filterValues": [{"name": "Yes"}, {"name": "No"}], "name": "Choice2" }]'/>
<table width='100%'>
<tbody data-bind='foreach: sortedLines'>
<tr>
<td>
Choose option:
</td>
<td>
<select data-bind='options: availableFilters, optionsText: "name", value: filterValue'> </select>
</td>
<td data-bind="with: filterValue">
<!-- ko if: name === "Text" -->
<input type="text">
<!-- /ko -->
<!-- ko ifnot: name === "Text" -->
<select data-bind='options: filterValues, optionsText: "name", value: "name"'> </select>
<!-- /ko -->

<td>
<button class="widthFull buttonInput" href='#' data-bind='click: $parent.removeFilter, visible: $parent.lines().length > 1, event: { mouseover: $parent.btnRemoveOver, mouseout: $parent.btnRemoveOut }'><span data-bind="text: $parent.btnRemoveTxt"></span></button>
</td>
</tr>
</tbody>
</table>
<button data-bind='click: addFilter'>Add Choice</button>
<br>
<input type="submit"Submit</>
</div>


Someone can assist me here?
I am new with Knockout.js.

Thanks in advance!

Answer

Your btnRemoveText is a shared property (it's in $parent). You need to add it to each CartLine if you want it to work as you intended.

However, I'd suggest simply using css for this feature:

.buttonInput::after {
  content: "X";
}

.buttonInput:hover::after {
  content: "remove";
}

With the much simpler html:

<button class="widthFull buttonInput" href='#' data-bind='
  click: $parent.removeFilter, 
  visible: $parent.lines().length > 1'>
</button>

http://jsfiddle.net/8z3agfwc/

To be complete: If you do want to move the functionality to the CartLine viewmodel:

html:

<button class="widthFull buttonInput" href='#' data-bind='
  click: $parent.removeFilter, 
  visible: $parent.lines().length > 1, 
  event: { 
    mouseover: btnRemoveOver, 
    mouseout: btnRemoveOut 
  }'>

  <span data-bind="text: btnRemoveTxt"></span>

</button>

js:

var CartLine = function(siblings) {
  var self = this;

  self.btnRemoveTxt = ko.observable("X");

  self.btnRemoveOver = function() {
    self.btnRemoveTxt("Remove");
  };

  self.btnRemoveOut = function() {
    self.btnRemoveTxt("X");
  };

  // etc.
};

http://jsfiddle.net/t4ys35st/