Knockout: implementing “focusing” on object from list
In my root viewmodel I have observable array of objects.
I'd like to have drop-down list that allows user to select element of that list (lets call it current) and then be able to bind some property of selected object to some edit box.
So, to the user this should look like heshe can "focus" on some particular object (using combo-box) and then edit it's properties.
Right now in my html I have something like this:
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
... for drop-down list, and:
<input data-bind="value: current.property"/>
... for property that should be edited.
Meanwhile, in js I do something like this:
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());
However, when I select value inside drop-down list nothing happens.
I suspect that I am not managing current property of AppViewModel correctly.
What is the correct way to implement this in knockout?
javascript knockout.js
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
add a comment |
In my root viewmodel I have observable array of objects.
I'd like to have drop-down list that allows user to select element of that list (lets call it current) and then be able to bind some property of selected object to some edit box.
So, to the user this should look like heshe can "focus" on some particular object (using combo-box) and then edit it's properties.
Right now in my html I have something like this:
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
... for drop-down list, and:
<input data-bind="value: current.property"/>
... for property that should be edited.
Meanwhile, in js I do something like this:
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());
However, when I select value inside drop-down list nothing happens.
I suspect that I am not managing current property of AppViewModel correctly.
What is the correct way to implement this in knockout?
javascript knockout.js
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
add a comment |
In my root viewmodel I have observable array of objects.
I'd like to have drop-down list that allows user to select element of that list (lets call it current) and then be able to bind some property of selected object to some edit box.
So, to the user this should look like heshe can "focus" on some particular object (using combo-box) and then edit it's properties.
Right now in my html I have something like this:
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
... for drop-down list, and:
<input data-bind="value: current.property"/>
... for property that should be edited.
Meanwhile, in js I do something like this:
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());
However, when I select value inside drop-down list nothing happens.
I suspect that I am not managing current property of AppViewModel correctly.
What is the correct way to implement this in knockout?
javascript knockout.js
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
In my root viewmodel I have observable array of objects.
I'd like to have drop-down list that allows user to select element of that list (lets call it current) and then be able to bind some property of selected object to some edit box.
So, to the user this should look like heshe can "focus" on some particular object (using combo-box) and then edit it's properties.
Right now in my html I have something like this:
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
... for drop-down list, and:
<input data-bind="value: current.property"/>
... for property that should be edited.
Meanwhile, in js I do something like this:
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());
However, when I select value inside drop-down list nothing happens.
I suspect that I am not managing current property of AppViewModel correctly.
What is the correct way to implement this in knockout?
javascript knockout.js
javascript knockout.js
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
asked Nov 12 '18 at 19:47
Eugene LoyEugene Loy
9,06973969
9,06973969
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You had 2 problems with your code:
- current is observable so to evaluate value you have to use "()".
- "current().property" wont be accessible unless current is set. so to avoid failure put a check.
Hope this will help.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
add a comment |
Just to make an improvement to Amit Bhoyar's answer (I think it's a thing of likes) I suggest you to use the with binding instead of if binding so you don't have to worry about call current().property to bind the value, with binding create the right context of current selected item and also ensure that the html block inside of it just get render with true-y values of current observable. I also changed the value binding to textInput binding to get a better application response to changes on the text input.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269105%2fknockout-implementing-focusing-on-object-from-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You had 2 problems with your code:
- current is observable so to evaluate value you have to use "()".
- "current().property" wont be accessible unless current is set. so to avoid failure put a check.
Hope this will help.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
add a comment |
You had 2 problems with your code:
- current is observable so to evaluate value you have to use "()".
- "current().property" wont be accessible unless current is set. so to avoid failure put a check.
Hope this will help.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
add a comment |
You had 2 problems with your code:
- current is observable so to evaluate value you have to use "()".
- "current().property" wont be accessible unless current is set. so to avoid failure put a check.
Hope this will help.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
You had 2 problems with your code:
- current is observable so to evaluate value you have to use "()".
- "current().property" wont be accessible unless current is set. so to avoid failure put a check.
Hope this will help.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
answered Nov 12 '18 at 20:25
Amit BhoyarAmit Bhoyar
40811
40811
add a comment |
add a comment |
Just to make an improvement to Amit Bhoyar's answer (I think it's a thing of likes) I suggest you to use the with binding instead of if binding so you don't have to worry about call current().property to bind the value, with binding create the right context of current selected item and also ensure that the html block inside of it just get render with true-y values of current observable. I also changed the value binding to textInput binding to get a better application response to changes on the text input.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
add a comment |
Just to make an improvement to Amit Bhoyar's answer (I think it's a thing of likes) I suggest you to use the with binding instead of if binding so you don't have to worry about call current().property to bind the value, with binding create the right context of current selected item and also ensure that the html block inside of it just get render with true-y values of current observable. I also changed the value binding to textInput binding to get a better application response to changes on the text input.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
add a comment |
Just to make an improvement to Amit Bhoyar's answer (I think it's a thing of likes) I suggest you to use the with binding instead of if binding so you don't have to worry about call current().property to bind the value, with binding create the right context of current selected item and also ensure that the html block inside of it just get render with true-y values of current observable. I also changed the value binding to textInput binding to get a better application response to changes on the text input.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
Just to make an improvement to Amit Bhoyar's answer (I think it's a thing of likes) I suggest you to use the with binding instead of if binding so you don't have to worry about call current().property to bind the value, with binding create the right context of current selected item and also ensure that the html block inside of it just get render with true-y values of current observable. I also changed the value binding to textInput binding to get a better application response to changes on the text input.
function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->function ObjectViewModel(p) {
var self = this;
self.property = ko.observable(p);
}
function AppViewModel() {
var self = this;
self.objects = ko.observableArray([
new ObjectViewModel("id1"),
new ObjectViewModel("id2")
]);
self.current = ko.observable();
}
ko.applyBindings(new AppViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>
<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
answered Nov 14 '18 at 5:50
GxzzinGxzzin
415
415
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269105%2fknockout-implementing-focusing-on-object-from-list%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
