I am new to knockout, currently I met a weird problem. What I want is to use ko if-else bind, please see the code below:
<table>
<thead>
something......
</thead>
<tbody>
<tr>
Problem comes here...
<!-- ko ifnot: editing -->
<td><span data-bind="text: Value" /></td>
<td><button data-bind="click: Edit">Edit</button></td>
<!-- /ko -->
<!-- ko if: editing -->
<td><input data-bind="value: Value"></td>
<td><button data-bind="click: Save">Save</button></td>
<!-- /ko -->
</tr>
</tbody>
</table>
In ViewModel:
function SettingData(){
var self = this;
self.editing = ko.observable(false);
self.Edit = function () {
self.editing(true);
};
self.Save = function () {
self.editing(false);
}
}
When start the page, content in if and ifnot statement all come out (it should be wrong). When click "Edit", only content in if statement show up and content in ifnot statement disappear, which is good, but when click "Save", connent in if and ifnot statement all show up.
I don't know which part of my code is incorrect, can anyone give me hand? Thanks.
You must add Value observable in the viewmodel. Add below line to function SettingData()
self.Value = ko.observable("");
Related
I've tried several ways of doing this with no success. Would love some advice!
Goal: I have a table where each row is an order, but where within that row, if changes need to be made, a div appears underneath (in red). This needs to show/hide when a button on that row is clicked/toggled (Button is: Make Changes)
Issue: I have all the buttons working apart from the make changes toggle. Tried the visible observable, but the closest I could get was toggling the div's visibility for the whole table, not per row.
//Class to represent a row in the table
function orderDetail(order, orderChange) {
var self = this;
self.order = ko.observable(order);
self.orderChange = ko.observable(orderChange);
}
//Overall viewmodel, plus initial state
function FoodViewModel() {
var self = this;
self.foodTypes = [
{ foodType: "Please Select"},
{ foodType: "Veg"},
{ foodType: "Meat"}
];
self.orders = ko.observableArray([
new orderDetail(self.foodTypes[0], self.foodTypes[0])
]);
// Add and remove rows
self.addOrder = function() {
self.orders.push(new orderDetail(self.foodTypes[0], self.foodTypes[0]));
}
self.removeOrder = function(order) { self.orders.remove(order) }
}
ko.applyBindings(new FoodViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<tr>
<th>Orders</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orders">
<tr>
<td>
<div><select data-bind="options: $root.foodTypes, value: order, optionsText: 'foodType'" id="foodList"></select></div>
<div><select data-bind="options: $root.foodTypes, optionsText: 'foodType', value: orderChange" id="foodListChange" style="color: red;"></select></div>
</td>
<td>
<button class="button button2" >Make Changes</button>
</td>
<td>
<button class="button button1" href="#" data-bind="click: $root.removeOrder">Remove</button>
</td>
</tr>
</tbody>
</table>
<button data-bind="click: addOrder" class="button">Add Order</button>
Thanks in advance!
If you want that the user interface reacts to something in Knockout, make an observable.
In this case you want to display part of the UI conditionally (apparently to toggle an edit mode), so let's create:
an observable editMode that is either true or false, to store the UI state
a function toggleEditMode that toggles between the two states, to bind it to the button
an if: editMode and an ifnot: editMode binding, to show different parts of the UI accordingly
function OrderDetail(params) {
var self = this;
params = params || {};
self.order = ko.observable(params.order);
self.orderChange = ko.observable(params.orderChange);
self.editMode = ko.observable(true);
self.buttonCaption = ko.pureComputed(function () {
return self.editMode() ? "Done" : "Edit";
});
self.toggleEditMode = function () {
self.editMode(!self.editMode());
}
}
function OrderList(params) {
var self = this;
params = params || {};
self.foodTypes = ko.observableArray(params.foodTypes);
self.orders = ko.observableArray();
self.addOrder = function(foodType) {
self.orders.push(new OrderDetail());
}
self.removeOrder = function(order) {
self.orders.remove(order);
}
}
var vm = new OrderList({
foodTypes: [
{foodType: "Veg"},
{foodType: "Meat"}
]
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<tr>
<th style="width: 150px;">Orders</th>
<th>Actions</th>
</tr>
</thead>
<tbody data-bind="foreach: orders">
<tr>
<td>
<div data-bind="ifnot: editMode">
<!-- ko with: order -->
<span data-bind="text: foodType"></span>
<!-- /ko -->
</div>
<div data-bind="if: editMode">
<select data-bind="
options: $root.foodTypes,
value: order,
optionsText: 'foodType',
optionsCaption: 'Please select…'
"></select>
</div>
</td>
<td>
<button class="button button2" data-bind="
click: toggleEditMode,
text: buttonCaption,
enable: order
"></button>
<button class="button button1" href="#" data-bind="
click: $root.removeOrder
">Remove</button>
</td>
</tr>
</tbody>
</table>
<button data-bind="click: addOrder" class="button">Add Order</button>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
Notes
Don't make "Please Select" part of your food types. That's what the optionsCaption binding is for.
I've parameterized the viewmodels (see the params object). This will work better than hard-coding values or using long argument lists, especially if you want to use a mapping plugin later.
The "Done" button is disabled as long as no order is selected, via the enable: order binding, i.e. if the order property is empty, the enable binding will keep the button disabled.
The with: order binding serves a similar purpose. It will only display its contents when there actually is an order value to display. This will prevent rendering errors with incomplete OrderDetail instances.
I have three elements in my HTML, the Question, The Score, The Comment. The Score is an HTML SELECT, with "Poor", "Good" and "Excellent" as it's options.
I only want the Comment field to be visbile if the Score is not = "Good".
<!-- ko foreach: questions -->
<tr>
<td data-bind="text: question"></td>
<td><select data-bind="options: availableScores"></select></td>
<td>
<!-- ko if: availableScores() != 'Good' -->
<input data-bind="textInput: comment" />
<!-- /ko -->
</td>
</tr>
<!-- /ko -->
Any advice appreciated, thanks.
I assume that the comment textbox must only be visible if the selected score differs from the value 'Good'.
For doing so, the selected value must be tracked and bound to the listbox,
here below via the property selectedScore.
A minimal MCVE shows this behaviour.
var Question = function() {
_self = this;
_self.question = "";
_self.comment = ko.observable("");
_self.availableScores = ["Good", "Poor", "Excellent"];
_self.selectedScore = ko.observable("Good");
}
var vm = new Question();
ko.applyBindings(vm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: availableScores, value: selectedScore"></select>
<!-- ko if: selectedScore() != 'Good' -->
Comment: <input data-bind="textInput: comment" />
<!-- /ko -->
how about you modify this line:
<!-- ko if: availableScores() != 'Good' -->
to something like:
<!-- ko if: displayComments() -->
and in your code add something like:
this.displayComments = ko.computed(function(){ return this.availableScores() !== 'Good'; });
Hello I am unable use knockout 'submit' binding with 'foreach' binding.
I cannot figure out what is mistake here.
Please help me find my mistake.
My view model is like this:
function poReceivingModel(){
var self = this;
var initial_row = new poReceivingRowModel();
self.rows = ko.observableArray([initial_row]);
self.saveAndAdd = function(formElement){
alert('entered into function');
var row = new poReceivingRowModel();
self.rows.push(row);
};
};
function poReceivingRowModel(){
var self = this;
self.building = ko.observable();
self.isele_abc = ko.observable();
self.isele_num = ko.observable();
self.isele_floor = ko.observable();
};
And my html binded to 'viewmodel' is like this:
<tbody data-bind="foreach: rows">
<form data-bind="submit: $parent.saveAndAdd">
<tr>
<td>
<!-- input field here -->
</td>
<td>
<!-- input field here -->
</td>
<td>
<!-- input field here -->
</td>
<td>
<!-- input field here -->
</td>
<td>
<button type="submit">Save and Add</button>
</td>
</tr>
</form>
</tbody>
The problem is when I click on 'Add and Save' button 'saveAndAdd' function from 'poReceivingModel' is not called.
I do not get any alert message.
I tried calling that function with 'click' binding on 'button' element. The function get called this way ie I get alert message.
UPDATE:
In firebug I see form tag is closed just after
and button is out of 'form' tag.
I found that form tag cannot be used inside table tag. Solution is table tag can be put inside form tag .
If we do not want to do so we can change the table tag to div but this may not give you desired output.
I have a table bound to knockoutjs using foreach.
<table>
<thead>
<tr>
<th>ID</th>
<th>BALANCE</th>
<th>GENDER</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: data -->
<tr>
<!-- ko foreach: Object.keys($data) -->
<td>
<label data-bind="text: $parent[$data]" />
</td>
<!-- /ko -->
</tr>
<!-- /ko -->
</tbody>
</table>
Table rows iterate an observableArray (about 2000 items).
After table is rendered, I need to edit a row but table do not render the row changed.
How can I do this whithout clear observableArray and reload it again?
Here JSFIDDLE
Thank you
You need to make your data array properties observable so knockout would observe the changes. I'd suggest you to use knockout mapping to do the job of creating observables for you, like this:
var foo = new MyVM();
var mapping = {
create: function(options) {
return ko.mapping.fromJS(options.data);
}
};
ko.mapping.fromJS(myJS, mapping, foo.data);
But you need to change your markup so it won't just iterate through object properties, but explicitly specify which property should be used:
<tbody>
<!-- ko foreach: data -->
<tr>
<td>
<label data-bind="text: _id" />
</td>
<td>
<label data-bind="text: balance" />
</td>
<td>
<label data-bind="text: gender" />
</td>
<td>
<label data-bind="text: age" />
</td>
</tr>
<!-- /ko -->
</tbody>
Here is working demo. Of course you can make observables yourself, then just rewrite your code, so every property of each item in data array would be an observable.
Edit:
Well, since we don't know the actual properties, I'd suggest the following code to make observables:
var foo = new MyVM();
for (var i=0, n = myJSON.length; i < n; i++) {
for (var prop in myJSON[i])
if (myJSON[i].hasOwnProperty(prop))
myJSON[i][prop] = ko.observable(myJSON[i][prop]);
}
foo.data(myJSON);
And in your view model function:
self.changeRow = function (){
if(typeof self.data() != "undefined"){
self.data()[0]["gender"]("male");
}
};
See updated demo.
I am in the process of making one of my previous questions fully dynamic in that the model is built from server data, and the view loops through the viewmodel via the knockout ko foreach functionality.
The problems I am facing are:
The radio options don't stay with the value set, i.e. I click on the Operating System, and then select a Database option, and then the Operating System setting disappears.
The dependent options (in this case database and clustering) do not have their initial selection selected when the dependent option changes (i.e. when OS changes, DB should go back to the first option, none).
My fiddle is here and i think the problem is either related to the code below:
computedOptions.subscribe(function () {
var section = this;
console.log("my object: %o", section);
section.selection(section.options()[0].sku);
},section);
Or my view bindings:
<!-- ko foreach: selectedOptions -->
<h3><span data-bind="text: description"></span></h3>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="2" style="text-align: left;">Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: options -->
<tr>
<td><input type="radio" name="$parent.name" data-bind="checkedValue: $data, checked: $parent.selection" /></td>
<td style="text-align: left;"><span data-bind="text: name"></span></td>
<td style="text-align: left;"><span data-bind="text: price"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
<!-- /ko -->
I am not sure which and would appreciate a fresh eyes as my brain hurts from the jsfiddle session.
You have two problems:
You are not correctly binding your radio button's names: name="$parent.name" is not a knockout binding expression and it just assigns the string "$parent.name" to all of your radio buttons. What you need is to use the attr binding:
<input type="radio" data-bind="checkedValue: $data,
checked: $parent.selection,
attr: { name: $parent.name }" />
The initial selection is not working because you are using the checkedValue: $dataoption this means that your checked should contain the whole object and not just one property (sku) so you need to change your computedOptions.subscribe to:
computedOptions.subscribe(function () {
var section = this;
section.selection(section.options()[0]);
},section);
Demo JSFiddle.