I want the $root.addField action to happen whenever I drag my items onto the DROP THINGS HERE div. Just like what happens when you click the add field button.
Here is a fiddle so you can play with it -- http://jsfiddle.net/pt6k26kh/
JS
$(document).ready(function(){
var initialData = [
{ formTitle: "formTitle", formDescription: "formDesc", fields: [
{ fieldId: "text1", title: "title", description: "description Field", isReq: true },
{ fieldId: "text2", title: "ttitle22", description: "description Field 2", isReq: false }]
},
{ formTitle: "formTitle", formDescription: "formDesc", fields: [
{ fieldId: "text1", title: "title", description: "description Field", isReq: true },
{ fieldId: "text2", title: "ttitle22", description: "description Field 2", isReq: false }]
}
];
var FieldsModel = function(fieldTemplates) {
var self = this;
self.fieldTemplates = ko.observableArray(ko.utils.arrayMap(fieldTemplates, function(fieldTemplate) {
return {
formTitle: fieldTemplate.formTitle, formDescription: fieldTemplate.formDescription,
fields: ko.observableArray(fieldTemplate.fields) };
}));
self.addfieldTemplate = function() {
self.fieldTemplates.push({
formTitle: "",
formDescription: "",
fields: ko.observableArray()
});
};
self.removefieldTemplate = function(fieldTemplate) {
self.fieldTemplates.remove(fieldTemplate);
};
self.addField = function(fieldTemplate, e) {
console.log("---addField");
console.log(e);
fieldTemplate.fields.push({
fieldId: "text",
title: "",
description: "",
isReq: false
});
};
self.removeField = function(field) {
$.each(self.fieldTemplates(), function() { this.fields.remove(field) })
};
self.save = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.fieldTemplates), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new FieldsModel(initialData));
});
HTML
<h2>Forms</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>Form Title</th>
<th>Form Description</th>
<th>Fields</th>
</tr>
<tbody data-bind="foreach: fieldTemplates">
<tr>
<td>
<input data-bind='value: formTitle' />
<div><a href='#' data-bind='click: $root.removefieldTemplate'>Delete</a></div>
</td>
<td><input data-bind='value: formDescription' /></td>
<td>
<table>
<tbody data-bind="foreach: fields">
<tr>
<td><input data-bind='value: title' /></td>
<td><input data-bind='value: description' /></td>
<td><input type="checkbox" data-bind='checked: isReq' /></td>
<td><a href='#' data-bind='click: $root.removeField'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addField'>Add field</a>
<div class="dropped" data-bind='event: {drop: $root.addField}'>DROP THINGS HERE</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="droppings" >
<div data-bind='drag: {value: $data}' class="toDrop">toDrop 1</div>
<div data-bind='drag: {value: $data}' class="toDrop">toDrop 2</div>
<div data-bind='drag: {value: $data}' class="toDrop">toDrop 3</div>
</div>
<div class="dropped" data-bind='event: {drop: $root.addField}'>DROP THINGS HERE</div>
<script type="text/javascript">
$(".droppings .toDrop").draggable({
helper: "clone",
drop: function(event, ui){
}
});
$(".dropped").droppable({
drop: function(event, ui){
$(".dropped").append('<div class="beenDropped">beenDropped</div>');
console.log("dropped");
}
});
</script>
Based on the discussion above and my understanding of the problem I think we should do the following.
Add a new method called
self.globalAddField = function(){
self.addField(self.fieldTemplates()[self.fieldTemplates().length-1])
}
The new method will pass the last item of the self.fieldTemplates() as an argument to the existing addField method. The rest of the functionality will remain same.
Modify the HTML as below.
<div class="dropped" data-bind='event: {drop: $root.globalAddField}'>DROP THINGS HERE</div>
Updated fiddle.
http://jsfiddle.net/sherin81/pt6k26kh/2/
Related
I have a Knockout model that have created in the snippet below.
What I'm trying to do is create a many to many relationship in a popup dialog from option rows that ive added to a option(I'm hoping this make sense when you look at the jsfiddler). When you click on the lookup link on the children column on the rows I list ALL the option rows in a dialog and with a check box list and allow the user to select the children relations to the to a specific row, hence a many to many relationship between rows.
I have defaulted the data of of my desired as a output in the first option group but I am not sure how to make this work.
I'm not sure if I'm going about this correct way and am hoping some Knockout guru can point me in the right direction to get this functionality in the popup.
/*Select Options*/
var initialData = [{
title: "User Band",
productoptionrows: [{
id: "1",
title: "25-100",
related: [{
id: "4",
title: '1 Year'
}, {
id: "5",
title: '2 Year'
}, {
id: "6",
title: '3 Year'
}]
}, {
id: "2",
title: "101-250",
related: [{
id: "7",
title: '1 Year'
}, {
id: "8",
title: '2 Year'
}, {
id: "9",
title: 'qwe'
}]
}, {
id: "3",
title: "251-500",
related: [{
id: "10",
title: '1 Year'
}, {
id: "11",
title: '2 Year'
}, {
id: "12",
title: '3 Year'
}]
}]
}, {
title: "Please select the number of years license",
productoptionrows: [{
id: "4",
title: "1 Year",
related: []
}, {
id: "5",
title: "2 Year",
related: []
}, {
id: "6",
title: "3 Year",
related: []
}, {
id: "7",
title: "1 Year",
related: []
}, {
id: "8",
title: "2 Year",
related: []
}, {
id: "9",
title: "3 Year",
related: []
}, {
id: "10",
title: "1 Year",
related: []
}, {
id: "11",
title: "2 Year",
related: []
}, {
id: "12",
title: "3 Year",
related: []
}]
}];
$(document).ready(function () {
/*Models*/
var mappingOptions = {
'productoptionrows': {
create: function (options) {
return new productoptionrow(options.data);
}
}
};
var mappingOptionsPR = {
create: function (options) {
return new productoptionrow(options.data);
}
};
var productoptionrow = function (por) {
var self = ko.mapping.fromJS(por, {}, this);
self.relatedcsv = ko.computed(function () {
return $(por.related).map(function () {
return this.id;
}).get().join(',');
}, self);
self.selectedrelated = ko.observableArray($(por.related).map(function () {
return this.id;
}).get());
};
var ProductOptionModel = function (data) {
var self = this;
self.productoptions = ko.mapping.fromJS(data, mappingOptions);
self.isOpen = ko.observable(false);
self.selectedrelated = ko.observableArray([]);
/*Control Events*/
self.addProductOption = function () {
var newoption = ko.mapping.fromJS({
title: "Please select the number of years license",
productoptionrows: ko.observableArray([{
id: "15",
title: "25-100",
related: []
}, {
id: "16",
title: "101-250",
related: []
}, {
id: "17",
title: "251-500",
related: []
}])
}, mappingOptions);
self.productoptions.push(newoption);
};
self.copyProductOption = function (productoption) {
var copy = ko.mapping.fromJS(ko.mapping.toJS(productoption), mappingOptions);
self.productoptions.push(copy);
};
self.removeProductOption = function (productoption) {
self.productoptions.remove(productoption);
};
self.addProductOptionRow = function (productoption) {
var newrow = ko.mapping.fromJS({
id: "15",
title: "25-100",
related: []
}, mappingOptionsPR);
productoption.productoptionrows.push(newrow);
};
self.removeProductOptionRow = function (productoption) {
$.each(self.productoptions(), function () {
this.productoptionrows.remove(productoption)
})
};
self.open = function (productoption, event) {
self.selectedrelated(productoption.related);
self.isOpen(true);
};
self.close = function () {
self.isOpen(false);
}
self.associaterelated = function (record, elem) {
//console.log(ko.mapping.toJS(record));
}
};
ko.applyBindings(new ProductOptionModel(initialData), document.getElementById('page-wrapper'));
});
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdn.rawgit.com/gvas/knockout-jqueryui/075b303a/dist/knockout-jqueryui.min.js"></script>
<div id="page-wrapper">
<div>
<button title="Add Option" type="button" data-bind='click: $root.addProductOption'>Add Option</button>
</div>
<div id="options" data-bind="foreach: productoptions">
<div style="padding:10px;margin:20px;background-color:whitesmoke">
<table class="option-header" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Group Title <span class="required">*</span></th>
<th>
<button title="Copy" type="button" class="" style="" data-bind='click: $root.copyProductOption'>Copy</button>
<button title="Delete Option" type="button" data-bind='click: $root.removeProductOption'>Delete Option</button>
</th>
</tr>
</thead>
<tbody>
<tr style="height:36px;">
<td>
<input type="text" data-bind='value: title'>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<div>
<table class="option-header-rows" cellpadding="0" cellspacing="0">
<thead>
<tr class="headings">
<th>Id</th>
<th colspan="2" class="type-title">Title <span class="required">*</span></th>
<th>Children</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: productoptionrows">
<tr>
<td align="center">
<input required type="text" style="width:40px" data-bind='value: id'>
</td>
<td colspan="2">
<input type="text" value="25-100" data-bind='value: title'>
</td>
<td>
<input type="text" data-bind='value: relatedcsv' name="isdefault">Lookup</td>
<td>
<button title="Delete Row" type="button" data-bind='click: $root.removeProductOptionRow'>Delete Row</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">
<button title="Add New Row" type="button" data-bind='click: $root.addProductOptionRow'>Add New Row</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- popup -->
<div data-bind="dialog: { isOpen: isOpen,title:'Select relations', modal:true }">
<div data-bind="foreach: $root.productoptions">
<div data-bind='text: title'></div>
<div data-bind="foreach: productoptionrows">
<div>
<input type="checkbox" data-bind="value: id, checked: $root.selectedrelated" style="width:auto" />
ID <span data-bind='text: id'></span> - <span data-bind='text: title'></span>
</div>
</div>
</div>
</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>
I've tried to distill the many-to-many issue down to a simple example. Here, persons and things are mapped to each other. To track the mapping, each person has a list of things. For each possible thing, there is a checkbox with that value. Its checked binding is bound to the thingList for the current person.
Binding to an array makes the checkbox insert or remove its value to/from the array.
function person(name) {
return {
name,
thingList: ko.observableArray()
};
}
const vm = {
people: ko.observableArray(['Abby', 'Bill', 'Charlie'].map((n) => person(n))),
things: ko.observableArray(['apple', 'bullet', 'cup', 'doll', 'egg'])
};
ko.applyBindings(vm);
.checklist {
display: inline-block;
}
.no-bullets {
list-style-type: none;
}
.no-bullets li {
display: inline;
padding-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach:people">
<div>Name: <span data-bind="text:name"></span>
<div class="checklist" data-bind="foreach:$parent.things">
<label><input type="checkbox" data-bind="value:$data, checked:$parent.thingList"><span data-bind="text:$data"></span></label>
</div>
<ul class="no-bullets" data-bind="foreach:thingList"><li data-bind="text:$data"></li></ul>
</div>
</div>
Anybody help me, I have these working code currently:
HTML:
<body ng-controller="ExampleCtrl">
<label>Category:</label>
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label><br/><br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file"/>
</td>
</tr>
</tbody>
</table>
JS
function ExampleCtrl($scope){
$scope.categories = [
{
name:'custom',
templateAttribute: [
{attribute: 'material'},
{attribute: 'soles'},
{attribute: 'size'}
]
}
];
$scope.products = [
{
name: 'custom',
category: {
name:'custom',
templateAttribute: [
{
type: "string",
attribute: "material"
},
{
type: "string",
attribute: "soles"
},
{
type: "string",
attribute: "size"
}
]
}
}
];
// add menu item
$scope.addItem = function(list, item){
list.push(angular.copy(item));
item = {};
};
// remove menu item
$scope.removeItem = function(list, index){
list.splice(index ,1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
For a demo :
Seet Demo
My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. How to fix my problem?
item should be defined as {} before pushing in list array.
If you do not want to send any model data through view then there is no point of sending attr argument to controller
Try this:
// Code goes here
function ExampleCtrl($scope) {
$scope.categories = [{
name: 'custom',
templateAttribute: [{
attribute: 'material'
}, {
attribute: 'soles'
}, {
attribute: 'size'
}]
}];
$scope.products = [{
name: 'custom',
category: {
name: 'custom',
templateAttribute: [{
type: "string",
attribute: "material"
}, {
type: "string",
attribute: "soles"
}, {
type: "string",
attribute: "size"
}]
}
}];
// add menu item
$scope.addItem = function(list, item) {
item = {};
list.push(angular.copy(item));
};
// remove menu item
$scope.removeItem = function(list, index) {
list.splice(index, 1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<h3>How to fix this</h3>
<p>My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. Demo:</p>
<label>Category:
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label>
<br/>
<br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Codepen demo
I am trying to get two examples from knockout.com working and I have yet to figure it out. Any help would be greatly appreciated!
http://jsfiddle.net/gZC5k/2863/
When running this project and using a debugger I get an error:
Uncaught ReferenceError: Unable to process binding "foreach: function (){return linesa }"
Message: linesa is not defined
From the original example I changed lines to linesa to see if anything else was screwing it up. It still did not like linesa
My main goal is to get these two samples working together. The Add a contact button works but the Add product does not work.
Thank you!
<div class='liveExample'>
<h2>Contacts</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>
<tbody data-bind="foreach: contactsa">
<tr>
<td>
<input data-bind='value: firstName' />
<div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div>
</td>
<td><input data-bind='value: lastName' /></td>
<td>
<table>
<tbody data-bind="foreach: phones">
<tr>
<td><input data-bind='value: type' /></td>
<td><input data-bind='value: number' /></td>
<td><a href='#' data-bind='click: $root.removePhone'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addPhone'>Add number</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addContact'>Add a contact</button>
<button data-bind='click: save, enable: contactsa().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
</div>
<div class='liveExample'>
<table width='100%'>
<thead>
<tr>
<th width='25%'>Category</th>
<th width='25%'>Product</th>
<th class='price' width='15%'>Price</th>
<th class='quantity' width='10%'>Quantity</th>
<th class='price' width='15%'>Subtotal</th>
<th width='10%'> </th>
</tr>
</thead>
<tbody data-bind='foreach: linesa'>
<tr>
<td>
<select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'> </select>
</td>
<td data-bind="with: category">
<select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select>
</td>
<td class='price' data-bind='with: product'>
<span data-bind='text: formatCurrency(price)'> </span>
</td>
<td class='quantity'>
<input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' />
</td>
<td class='price'>
<span data-bind='visible: product, text: formatCurrency(subtotal())' > </span>
</td>
<td>
<a href='#' data-bind='click: $parent.removeLine'>Remove</a>
</td>
</tr>
</tbody>
</table>
<p class='grandTotal'>
Total value: <span data-bind='text: formatCurrency(grandTotal())'> </span>
</p>
<button data-bind='click: addLine'>Add product</button>
<button data-bind='click: save'>Submit order</button>
</div>
var initialData = [
{ firstName: "Danny", lastName: "LaRusso", phones: [
{ type: "Mobile", number: "(555) 121-2121" },
{ type: "Home", number: "(555) 123-4567"}]
},
{ firstName: "Sensei", lastName: "Miyagi", phones: [
{ type: "Mobile", number: "(555) 444-2222" },
{ type: "Home", number: "(555) 999-1212"}]
}
];
var ContactsModel = function(contactstest) {
var self = this;
self.contactsa = ko.observableArray(ko.utils.arrayMap(contactstest, function(contact) {
return { firstName: contact.firstName, lastName: contact.lastName, phones: ko.observableArray(contact.phones) };
}));
self.addContact = function() {
self.contactsa.push({
firstName: "",
lastName: "",
phones: ko.observableArray()
});
};
self.removeContact = function(contact) {
self.contactsa.remove(contact);
};
self.addPhone = function(contact) {
contact.phones.push({
type: "",
number: ""
});
};
self.removePhone = function(phone) {
$.each(self.contactsa(), function() { this.phones.remove(phone) })
};
self.save = function() {
self.lastSavedJson(JSON.stringify(ko.toJS(self.contactsa), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new ContactsModel(initialData));
function formatCurrency(value) {
return "$" + value.toFixed(2);
}
var CartLine = function() {
var self = this;
self.category = ko.observable();
self.product = ko.observable();
self.quantity = ko.observable(1);
self.subtotal = ko.computed(function() {
return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
});
// Whenever the category changes, reset the product selection
self.category.subscribe(function() {
self.product(undefined);
});
};
var Cart = function() {
// Stores an array of lines, and from these, can work out the grandTotal
var self = this;
self.linesa = ko.observableArray([new CartLine()]); // Put one line in by default
self.grandTotal = ko.computed(function() {
var total = 0;
$.each(self.linesa(), function() { total += this.subtotal() })
return total;
});
// Operations
self.addLine = function() { self.linesa.push(new CartLine()) };
self.removeLine = function(line) { self.linesa.remove(line) };
self.save = function() {
var dataToSave = $.map(self.linesa(), function(line) {
return line.product() ? {
productName: line.product().name,
quantity: line.quantity()
} : undefined
});
alert("Could now send this to server: " + JSON.stringify(dataToSave));
};
};
ko.applyBindings(new Cart());
ViewModel is a ContactsModel, since ContactsModel does not have a linesa property, it cannot render the contents of the table.
<tbody data-bind='foreach: linesa'>
this is the offending line.
You are working with 2 ViewModels actually, the Cart ViewModel and the Contacts ViewModel.
you need to make a new ViewModel that implements both ViewModels and you can bind the views using with binding.
Code:
function CombinedViewModel(){
this.cart=new Cart();
this.contact=new Contact();
}
ko.appyBindings(new CombinedViewModel());
and for the bindings
<div data-bind="with:cart"><!-- cart html view goes here --></div>
<div data-bind="with:contact"><!-- contact html view goes here --></div>
I am trying to learn a little bit of knockout.js so I am running through the examples on the website in particular the contact example. (Knockout Contacts Editor)
I am trying to extend this example by adding a select list with a property of 'ContactType'
ContactType is a basic list containing 2 objects.
I have created a fork of the example and extended it slightly My Extended Example fiddle
var initialData = {
"names": [{
firstName: "Danny",
lastName: "LaRusso",
contactTypeId: 1,
phones: [{
type: "Mobile",
number: "(555) 121-2121"
}, {
type: "Home",
number: "(555) 123-4567"
}]
}, {
firstName: "Sensei",
lastName: "Miyagi",
contactTypeId: 2,
phones: [{
type: "Mobile",
number: "(555) 444-2222"
}, {
type: "Home",
number: "(555) 999-1212"
}]
}],
"contactTypes": [{
"id": 1,
"type": "Family"
}, {
"id": 2,
"type": "Friend"
}]
}
var ContactsModel = function (contacts) {
var self = this;
self.contactTypes = ko.observableArray(ko.utils.arrayMap(contacts.contactTypes,
function (contactType) {
return {
id: contactType.id,
type: contactType.type
};
}));
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts.names, function (contact) {
return {
firstName: contact.firstName,
lastName: contact.lastName,
phones: ko.observableArray(contact.phones),
contactTypeId: ko.observable(contact.contactTypeId)
};
}));
self.addContact = function () {
self.contacts.push({
firstName: "",
lastName: "",
phones: ko.observableArray(),
contactTypeId: ko.observable()
});
};
self.removeContact = function (contact) {
self.contacts.remove(contact);
};
self.addPhone = function (contact) {
contact.phones.push({
type: "",
number: ""
});
};
self.removePhone = function (phone) {
$.each(self.contacts(), function () {
this.phones.remove(phone)
})
};
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new ContactsModel(initialData));
HTML
<div class='liveExample'>
<h2>Contacts</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Contact Type</th>
<th>Phone numbers</th>
</tr>
<tbody data-bind="foreach: contacts">
<tr>
<td>
<input data-bind='value: firstName' />
<div><a href='#' data-bind='click: $root.removeContact'>Delete</a>
</div>
</td>
<td>
<input data-bind='value: lastName' />
</td>
<td>
<select class="form-control" data-bind="options: $root.contactTypes,
optionsText: 'type',
optionsValue:'id',
value:'contactTypeId',
optionsCaption: 'Please Select...'"></select>
</td>
<td>
<table>
<tbody data-bind="foreach: phones">
<tr>
<td>
<input data-bind='value: type' />
</td>
<td>
<input data-bind='value: number' />
</td>
<td><a href='#' data-bind='click: $root.removePhone'>Delete</a>
</td>
</tr>
</tbody>
</table> <a href='#' data-bind='click: $root.addPhone'>Add number</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addContact'>Add a contact</button>
<button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'></textarea>
</div>
I have 2 problems which I am not sure what I am doing wrong with.
When the page is loaded the select list is not displaying the correct value. Instead its just displaying the 'Please Select' value
When I try save the record the selected value from the select list is not saved.
Am I doing something obviously wrong here?
The issue was you were setting the value binding incorrectly. Instead of value: 'contactTypeId' when it should just be value: contactTypeId without the quotations.
<select class="form-control" data-bind="options: $root.contactTypes,
optionsText: 'type',
optionsValue: 'id',
value: contactTypeId,
optionsCaption: 'Please Select...'">
</select>
Also for the save function it's better to use use knockouts ko.toJSON instead of JSON.stringify(ko.toJS
self.save = function () {
self.lastSavedJson(ko.toJSON(self.contacts), null, 2);
};
I am trying to implement that functionality on this demo:
http://opensoul.org/2011/06/23/live-search-with-knockoutjs/
I managed to get everything working, but the demo uses a very old version of knockout.
When I upgrade the knockout version the functionality breaks.
This is my updated code:
$(function() {
var assets = [
{id: "1", poster: "Pic010.jpg", name: "Mike", category: "category1", type: "Movie", popup: "1" },
{id: "2", poster: "Pic06.jpg", name: "James", category: "category2", type: "Movie", popup: "2" },
{id: "3", poster: "Pic04.jpg", name: "John", category: "category1", type: "Pop-up", popup: "3" },
{id: "4", poster: "Pic07.jpg", name: "Bob", category: "category2", type: "Pop-up", popup: "4" },
{id: "5", poster: "Pic011.jpg", name: "Mary", category: "category3", type: "Promo", popup: "5" }
];
var viewModel = {
assets: ko.observableArray(assets),
query: ko.observable(''),
search: function(value) {
viewModel.assets.removeAll();
for(var x in assets) {
if(assets[x].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.assets.push(assets[x]);
}
}
}
};
viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);
});
The display:
<form action="#">
<input class="form-control" placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>
<div class="content">
<table>
<tbody data-bind="foreach:assets">
<tr>
<td style="vertical-align: middle" data-bind="text: id"> </td>
<td><img data-bind="attr:{ src: '/manager/files/' + poster }" height="100px" /></td>
<td style="vertical-align: middle" data-bind="text: name"></td>
<td style="vertical-align: middle" data-bind="text: category"></td>
<td style="vertical-align: middle" data-bind="text: type"></td>
<td style="vertical-align: middle" data-bind="text: popup"></td>
<td class="actions" style="vertical-align: middle">
<i class="fa fa-pencil-square-o"></i>
<form data-bind="attr:{ action: '/Assets/delete/' + id, name: 'delete_' + id, id: 'delete_'+ id }" style="display:none;" method="post"><input type="hidden" name="_method" value="POST"></form>
</i>
</td>
</tr>
</tbody>
</table>
</div>
here are examples, working with Knockout version 1.21: http://jsfiddle.net/7ZLdk/1/ example not working with version 3.0: http://jsfiddle.net/7ZLdk/2/
This behavior has been changed back in 2011: Updated remove and removeAll to modify their underlying arrays rather han creating new arrays
So now when you call removeAll on an ko.observableArray it removes the items form the underlying arrays, so in your case it empties your original assets array.
A quick fix would be to clone the array when assigning to your ko.observableArray:
assets: ko.observableArray(assets.slice(0)),
Demo JSFiddle.
A better and more modern solution would be to use a ko.computed property and the arrayFilter helper method to do the filtering:
assets: ko.computed(function () {
if (!viewModel.query())
return assets;
return ko.utils.arrayFilter(assets, function(item) {
return item.name.toLowerCase().indexOf(viewModel.query().toLowerCase()) >= 0;
});
}, null, {deferEvaluation: true})
Demo JSFiddle.